"样式化组件"的问题：错误：钩子调用无效

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 将 react 和 styled-component 从小部件库链接到消费者包。

考虑两者并且位于同一文件夹中，然后从添加链接到反应和样式化的组件

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

Answer 2

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

我在样式组件 v5.1.1和Next.js v12中遇到了"无效钩子调用"。

解决方案是暂时将样式组件降级到 v5.0.0，错误消失了！

Answer 3

所以问题最终出现在另一个文件中。我试图import Movie，但我不知道变量默认情况下不会导出，所以我最终在声明之前添加了导出，这解决了问题。

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