Question

我已经查看了其他问题的答案，但是由于我认为我的问题与开发依赖关系有关，因此未能找到与问题完全相关的答案，但是我对此表示错误。

我正在使用古腾堡（Gutenberg），并使用React v 16.12.0构建一个区块。具体功能是让用户选择每页显示的帖子数，然后在其下提供分页功能，该功能可循环显示由每页帖子确定的帖子。

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

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

这又链接到this文章。

我的代码如下：

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;

Pagination.js

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>
  );
};

Posts.js

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;

现在，我不认为这是代码（我可能错了，请指出是否是）。我认为这与this再想一遍这个问题的第三个条件有关：

重复的React为了使Hooks正常工作，react从您的导入应用程序代码需要解析为与react相同的模块从react-dom包内部导入。

我说要运行npm ls react来检查是否有重复的反应，并得到以下信息：

+-- @wordpress/scripts@6.0.0
| `-- @wordpress/babel-preset-default@4.7.0
|   `-- @wordpress/element@2.9.0
|     `-- react@16.12.0  deduped <--Is this the issue?
`-- react@16.12.0

还运行了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钩子：钩子只能在功能组件的主体内部调用

0 个答案: