reactjs 当效果中使用的状态会在效果执行过程中更新时，如何调用useEffect？

vwkv1x7d 于 2023-05-28 发布在 React

关注(0)|答案(2)|浏览(96)

考虑下面这样的代码：

const [list, setList] = useState([]);
const [curPage, setCurPage] = useState(0);

const fetchItem = useCallback(async ()=>{
  const data = await callAPI(); // data is an object

  setList(prev => [...prev, data]);
},[]);

useEffect(()=>{
  if(list.length - 1 < curPage) {
    fetchItem().then(()=>{
      // some operations
    });
  } else {
      // some operations
  }

},[curPage, fetchItem]); // eslint will throw a warning: React Hook useEffect has a missing dependency: 'list.length'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

ESlint会抛出一个警告，因为我没有把list放在dependencies数组中，但它在效果中被使用了。
但是如果我把list或list.length放在dependencies数组中，效果将重复执行，因为fetchItem将更新list。
我试图添加一个ref来存储list.length，但我认为这是非常规的。
有没有更好更优雅的方法来处理这种情况当一个效果依赖于一个状态，这个状态将在效果执行期间更新？

reactjs

来源：https://stackoverflow.com/questions/76325165/how-to-call-useeffect-when-the-state-used-in-the-effect-will-update-during-the-e

2条答案

按热度按时间

7rfyedvj1#

要在组件挂载时执行代码，需要将其写入useEffect的主体中。此外，如果希望在组件更新时执行代码，则应指定触发其执行的依赖项。当任何依赖值更改时，useEffect中的代码将再次运行。
你可以测试这个代码：

useEffect(()=>{
  if(list.length - 1 < curPage) {
    fetchItem().then(()=>{
      // some operations
    }
  } else {
      // some operations
  }
},[dependencies])

赞(0）回复(0）举报 2023-05-28

mwg9r5ms2#

您需要在useEffect中添加一个检查，以查看是否需要获取，如果不需要，则退出而不再次获取。您可以存储有关上次获取的信息，然后在条件中使用它。
例如：

const lastFetchedPageRef = useRef(-1);

const listLength = list.length;

useEffect(() => {
  if (lastFetchedPageRef.current != curPage && listLength - 1 < curPage) {
    // ...
    lastFetchedPageRef.current = curPage;
  }
}, [curPage, listLength, fetchItem]);

请注意，我对lastFetchedPageRef使用了ref，因为更新该值不需要导致重新呈现。

赞(0）回复(0）举报 2023-05-28

我来回答

reactjs 当效果中使用的状态会在效果执行过程中更新时，如何调用useEffect？

2条答案

相关问题

热门标签

最新问答