Javascript React钩子：钩子只能在函数组件的主体内部调用

我已经查看了其他问题的答案，但还没有找到一个完全相关的答案，因为我认为我的问题与开发依赖性有关，但我愿意在这一点上犯错

我正在使用Gutenberg并使用

React v16.12.0

构建一个块。具体的功能是让用户选择每页显示的帖子数量，然后在下面提供分页功能，该功能循环浏览由每页帖子决定的帖子

问题是，当我使用下面列出的代码时，会出现以下错误：

钩子只能在函数组件的主体内部调用

这又链接到文章

我的代码如下：

PostsContainer.js

const API = "http://localhost/wp-engine/wp-json/wp/v2/posts?per_page=100";

const PostsContainer = props => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(props.numPosts);

  useEffect(() => {
    const fetchPosts = async () => {
      setLoading(true);
      const res = await axios.get(API);
      setPosts(res.data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  //Get current posts
  const indexOfLastPost = currentPage * postsPerPage;
  const indexOfFirstPost = indexOfLastPost - postsPerPage;
  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

  //Change page
  const paginate = pageNumber => setCurrentPage(pageNumber);

  console.log(posts);

  return (
    <>
      <Posts posts={currentPosts} loading={loading} />
      {/* {props.paginatePosts && <Pagination />} */}
      <Pagination
        postsPerPage={postsPerPage}
        totalPosts={posts.length}
        paginate={paginate}
      />
    </>
  );
};

export default PostsContainer;

const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
  const pageNumbers = [];

  for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <ul>
      {pageNumbers.map(number => {
        return (
          <li key={number}>
            <a onClick={() => paginate(number)} href="#">
              {number}
            </a>
          </li>
        );
      })}
    </ul>
  );
};

const Posts = ({ posts, loading }) => {
  if (loading) {
    return <h3>Loading...</h3>;
  }

  return (
    <>
      {posts.map(post => {
        return (
          <Post
            image={post.dp_post_featured_image}
            title={post.title.rendered}
            content={post.excerpt.rendered}
          />
        );
      })}
    </>
  );
};

export default Posts;

还运行了

npm ls react dom

，得到了类似的结果：

+-- @wordpress/scripts@6.0.0
| `-- @wordpress/babel-preset-default@4.7.0
|   `-- @wordpress/element@2.9.0
|     `-- react-dom@16.12.0  deduped
`-- react-dom@16.12.0

因此，

react

有重复安装的问题吗？还是我的密码

---

不管是哪种方式，有没有办法解决这个问题，或者我应该使用一个类组件来管理我要做的事情？我更愿意使用钩子，因为它更干净，但如果需要，类显然可以使用。

您使用的是什么版本的

react dom

？16.12.0，我将更新问题以反映这一点。看起来您是为WordPress开发的。Gutenberg编辑器脚本已经随react一起提供，因此在脚本中不应包含它。实际上，您不需要在脚本中包含任何@wordpress包，它们都可以在编辑器中使用。例如：@wordpress/blockEditor->wp.blockEditor。您面临的问题似乎是您的脚本中包含了React，因此它与现有副本产生了冲突。是的，我知道我没有安装React，但我安装的唯一内容是WordPress脚本：

+-- @wordpress/scripts@6.0.0
| `-- @wordpress/babel-preset-default@4.7.0
|   `-- @wordpress/element@2.9.0
|     `-- react-dom@16.12.0  deduped
`-- react-dom@16.12.0