Question

有人问过类似的问题，但我还没有找到解决这个问题的方法。我有一个可以渲染所有电路板的组件，并且我正在使用自定义的useFetch挂钩来获取所有电路板。

const BoardsDashboard = () => {

  let [boards, setBoards] = useState([]);

  const { response } = useFetch(routes.BOARDS_INDEX_URL, {});

  setBoards(response);

  return (
    <main className="dashboard">
      <section className="board-group">
        <header>
          <div className="board-section-logo">
            <span className="person-logo"></span>
          </div>
          <h2>Personal Boards</h2>
        </header>

        <ul className="dashboard-board-tiles">
          {boards.map(board => (
            <BoardTile title={board.title} id={board.id} key={board.id} />
          ))}
          <CreateBoardTile />
        </ul>

      </section>
    </main>
  );
};

const useFetch = (url, options) => {
  const [response, setResponse] = useState([]);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);
  return { response, error };
};

由于setBoards(response)行，我收到了太多的重新渲染，但是我不确定处理此问题的正确方法是什么。

谢谢！

Answer 1

听起来像您可能希望useEffect挂钩在响应更新时采取措施。

useEffect(() => {
  setBoards(response);
}, [response]);

注意：如果您不需要更改boards状态，那么也许根本不需要更改状态，只需使用useFetch钩子返回的值，然后完成它。

const { response: boards } = useFetch(...);

React Hooks太多重新渲染

1 个答案: