“样式组件”问题：错误：无效的挂钩调用

Question

我正在完成一个教程，他们正在使用

styled-component

。渲染后在 js 文件中分配样式，我收到无效的挂钩调用。这是我的第一个反应教程，所以我正在努力用谷歌搜索答案。下面是我正在运行的代码。仅当我调用

<MovieGrid>

时才会弹出该错误。任何帮助将不胜感激

/* eslint react/no-did-mount-set-state: 0 */
import React, { Component } from 'react';
import styled from 'styled-components';
import Movie from './Movie';

class MoviesList extends Component {
  state = {
    movies: [],
  }

  async componentDidMount() {
    try {
      const res = await fetch('url');
      const movies = await res.json();
      this.setState({
        movies: movies.results,
      });
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    return (
      <MovieGrid>
        {this.state.movies.map(movie => <Movie key={movie.id} movie={movie} />)}
      </MovieGrid>
    );
  }
}

export default MoviesList;

const MovieGrid = styled.div`
  display: grid;
  padding: 1rem;
  grid-template-columns: repeat(6, 1fr);
  grid-row-gap: 1rem;
`;

Answer 1

您将此作为第三方包编写吗？被其他包消耗。

如果是，那么

请浏览这些链接。

https://styled-components.com/docs/faqs#how-can-i-fix-issues-when-using-npm-link-or-yarn-link

https://styled-components.com/docs/faqs#i-am-a-library-author-should-i-bundle-styledcomponents-with-my-library

https://webpack.js.org/guides/author-libraries/

https://robkendal.co.uk/blog/2019-12-22-solving-react-hooks-invalid-hook-call-warning/

有助于理解所有图片

就我而言，问题在于冗余的 React 和 Styled 组件

因此，我 npm 将小部件库中的反应和样式组件链接到消费者包。

考虑到 和 都在同一个文件夹中，然后从添加链接到反应和样式组件

npm link ../<consmer-package>/node_modules/react

npm link ../<consmer-package>/node_modules/styled-components

Answer 2

所以问题最终出现在另一个文件中。我试图

import Movie

，但我不知道默认情况下变量不会导出，所以我最终在声明之前添加了导出，这解决了问题。

export const Poster = styled.img`
  box-shadow: 0 0 35px black;
`;

Answer 3

如果有人使用带有样式组件的 Next.js v12，这对我有用：

我在 styled-components v5.1.1 和 Next.js v12 上遇到了“无效的钩子调用”。

解决方案是暂时将 styled-components 降级到 v5.0.0，错误就消失了！

Answer 4

我已经尝试了大部分解决方案，但对我不起作用，所以我做了一些调试并找到了解决方案。

失败：尝试链接样式组件并做出反应。但不会有帮助，因为一个包的链接另一个链接的包将被删除。

npm link ../<consmer-package>/node_modules/react
 
npm link ../<consmer-package>/node_modules/styled-components

已工作链接消费者包以及所有对等依赖项并在一个命令中运行。

npm link ../<consmer-package> ../<consmer-package>/node_modules/peerDependency-1 ../<consmer-package>/node_modules/peerDependency-2 ../<consmer-package>/node_modules/peerDependency-n

注：

1. consmer-package 是你的库名称 同行
2. Dependency-1、peerDependency-2、peerDependency-n 是库使用的对等依赖项的名称。