使用React Hooks重新渲染过多

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(...);