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

Question

嗨 Stack Overflow 社区！

我正在学习反应，现在我正在练习自定义钩子。我从这里获取示例数据： 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...

所以你只需要将这两个排列起来。如果你想要两级数组（也许是因为你计划向你的钩子添加更多，所以它 returning 不仅仅是 Comments），那么组件将需要删除其中一个他们。这可以通过解构来完成，如：

const [Comments] = useComments();

或者，如果你不需要那么复杂，你可以改变你的钩子不添加额外的数组，return 这个：

return Comments;

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

What's wrong with my custom hook in React?

frontend

single-page-application

reactjs