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

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;
`;