【发布时间】：2020-05-22 01:54:54
【问题描述】：
我正在学习他们使用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;
`;
【问题讨论】：
-
你能把作业
const MovieGrid移到课前试试吗？ -
我已将
const MovieGrid移动到 import 语句的下方，但仍然收到相同的错误消息
标签： javascript reactjs react-hooks styled-components