Question

我正在研究一个他们使用styled-component的教程。渲染后在js文件中分配样式，并且我收到了Invalid hook调用。这是我的第一个反应教程，所以我一直在努力寻找答案。下面是我正在运行的代码。仅当我致电<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都链接到了消费者包。

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

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

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

Answer 2

因此，问题最终出在另一个文件中。我试图进行import Movie，但是我没有意识到默认情况下不会导出变量，因此我在声明之前添加了export并解决了问题。

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

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

2 个答案: