编译失败：无法在顶层调用 React Hook “useState”答案

【问题标题】：Failed to compile : React Hook "useState" cannot be called at the top level编译失败：无法在顶层调用 React Hook “useState”
【发布时间】：2021-08-06 21:33:21
【问题描述】：

我是 ReactJS 的新手。我正在尝试建立一个备忘单（都在同一页上）来学习基础知识。

我的 Props.js 和 PropsList.js 不工作，我不明白那个错误信息。

PropList.js 是 Prop.js 的子级，并且， Prop.js 是 App.js 的子节点。

我只想在基本课程（useState、useEffect、props 等）的同一页面上使用 useState（以一种简单的方式作为初学者），并拥有一个分类良好的文件。

如果您有任何意见/建议，请提前致谢。

App.js

import './App.css';
import OutputtingLists from './Components/OutputtingLists';
import Props from './Components/Props';
import UsingState from './Components/UseState';

function App() {

  return (
    <div className="App">
      <UsingState />
      <OutputtingLists />
      <Props/>
    </div>
  );
}
export default App;

输出列表.js

import React, { useState } from 'react';

const OutputtingLists = () => {

  const [blogs, setBlogs] = useState([
    { title: 'My new website', body: 'lorem ipsum..', author:'mario', id: 1 },
    { title: 'Welcome Party !', body: 'lorem ipsum..', author:'luigi', id: 2 },
    { title: 'Cheat sheet /ReactJS', body: 'lorem ipsum..', author:'peach', id: 3 },
  ])

  return (
    <div className="OutputtingLists"> 
      <h3> 3 : Outputting Lists</h3> 
      {blogs.map((blog) => (
        <div className="blog-preview" key={blog.id}> 
          <h5><u>{blog.title}</u></h5>
          <p>Written by par {blog.author}</p>
        </div>
      ))}
    </div>
  );
};
export default OutputtingLists;

Props.js

import { useState } from 'react';
import PropsList from './PropsList';

const [blogs, setBlogs] = useState([
    { title: 'My new website', body: 'lorem ipsum..', author:'mario', id: 1 },
    { title: 'Welcome Party !', body: 'lorem ipsum..', author:'luigi', id: 2 },
    { title: 'Cheat sheet /ReactJS', body: 'lorem ipsum..', author:'peach', id: 3 },
  ])

const Props = () => {
  return (
    <div>
      <h3> 4 : Props </h3>
      <PropsList blogs={blogs}/>
    </div>
  );
};

export default Props;

PropsList.js

import React from 'react';

const PropsList = (props) => {
  const blogs = props.blogs;
  const timbres = props.timbres;

  console.log(blogs, props)

  return (
    <div className="props-list">
      {blogs.map((blog) => (
        <div className="props-list-preview" key={blog.id}> 
          <h5><u>{blog.title}</u></h5>
          <p>Written by par {blog.author}</p>
        </div>
      ))}

    </div>
  );
};

export default PropsList;

完整的错误信息

Failed to compile.

src/Components/Props.js
 Line 5:27:   React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks
 Line 11:31:  React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

【问题讨论】：

标签： reactjs

【解决方案1】：

问题出在您的 Props 组件中。将 useState 钩子移动到组件中。 React hooks 只能从函数组件体和自定义 React hooks 中调用。

Rules of Hooks

这里的“顶层”是指函数组件的顶层，而不是定义它的文件的顶层。

import { useState } from 'react';
import PropsList from './PropsList';

const Props = () => {
  const [blogs, setBlogs] = useState([
    { title: 'My new website', body: 'lorem ipsum..', author:'mario', id: 1 },
    { title: 'Welcome Party !', body: 'lorem ipsum..', author:'luigi', id: 2 },
    { title: 'Cheat sheet /ReactJS', body: 'lorem ipsum..', author:'peach', id: 3 },
  ]);

  return (
    <div>
      <h3> 4 : Props </h3>
      <PropsList blogs={blogs}/>
    </div>
  );
};

export default Props;

【讨论】：