reactjs - 更新状态，而不将其设置为 useEffect 中的依赖项？详尽的 deps lint 规则

Question

我有一个页面状态，当它更新时，我想将新项目添加到另一个状态，在本例中是列表状态。

在下面的示例中，我使用 page 作为 useEffect 中的依赖项，但无法使用 list，因为它会导致无限循环。

  const [list, setList] = useState([1, 2, 3, 4]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    const newList = ["a", "b", "c", "d"];
    setList(list.concat(newList));
  }, [page]);

尽管如此，这确实有效，但它会触发详尽的 deps lint 规则。我阅读了有关该规则的内容，并了解到让依赖项数组不包含所有已用值是一个坏主意，而且我真的不想只是禁用该规则。

在这种情况下更新页面时更新列表的正确方法是什么？

Answer 1

您应该使用setList的回调版本

  const [list, setList] = useState([1, 2, 3, 4]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    const newList = ["a", "b", "c", "d"];
    setList(currentList => currentList.concat(newList));
  }, [page]);