我在 React 中的自定义钩子有什么问题？

Question

您好 Stack Overflow 社区！

我正在学习 React，现在我正在练习自定义钩子。我从这里获取示例数据： https://jsonplaceholder.typicode.com/posts

我有两个组件。

App.js

import React from "react";
import useComments from "./hooks/useComments"

const App = () => {

  const Comments = useComments();

  const renderedItems = Comments.map((comment) => {
    return <li key={comment.id}>{comment.title}</li>;
  });

  return (
    <div>
      <h1>Comments</h1>
     <ul>{renderedItems}</ul> 
    </div>
  );
}

export default App;

useComments.js

import {useState, useEffect} from "react";

const useComments = () => {

    const [Comments, setComments] = useState([]);

    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/posts", {
            "mode": "cors",
            "credentials": "omit"
        }).then(res => res.json()).then(data => setComments(data))
    }, []);


    return [Comments];
};

export default useComments;

我的输出看起来像这样，我不知道为什么。没有警告或错误。

Answer 1

这一行使 Comments 成为一个数组：

const [Comments, setComments] = useState([]);

...然后你将它包装在一个额外的数组中：

return [Comments];

但是当您使用它时，您将其视为一维数组。

const Comments = useComments();

const renderedItems = Comments.map...

所以你只需要把这两个排成一行。如果您想要两个级别的数组（可能是因为您打算向钩子添加更多内容，以便它返回的内容不仅仅是 Comments），那么组件将需要删除其中之一。这可以通过解构来完成，如：

const [Comments] = useComments();

或者，如果您不需要那么复杂，您可以更改钩子以不添加额外的数组，并返回：

return Comments;