useeffect 正确使用异步函数

Question

我有一个无限滚动的组件，它调用 fetchList，但是当用户想要刷新列表并再次单击搜索按钮时，应该重置用户列表状态，如何使用钩子正确执行此操作？

  const fetchList = async () => {
    setState(prevState => ({...prevState,loading:true }));
    //postdata settings,etc here
    const responseJson = await context.api(  ...... );
    //...
            setState(prevState => {
                let userlist = prevState.userlist;
                //push new users to userlist here..
                return {...prevState,userlist: userlist, nextPage: responseJson.data.nextPage,loading:false}
            });
  }


Search button onclick:
  const startSearch =()=> {
    setState(prevState => ({
      ...prevState, nextPage: 0,userlist:[],newsearch:1}));
  }

  useEffect(() => {
    if(searchstate.newsearch)
    {
      fetchList();
      setState(prevState => ({
        ...prevState, newsearch:0}));   
    }
  },[searchstate.newsearch]);

有没有更好的方法来做到这一点？ 对于类，我只需使用回调即可：

    startSearch = async ()=> {
        this.setState({nextPage:0, userlist:[]}, this.fetchList);
    }

Answer 1

您可以通过将您的逻辑移动到startSearch 来简化您所拥有的内容，但您仍然需要一个 useEffect 来调用 fetchList。我已经将“nextPage”拆分为“nextPage”和“pageToRender”。它与您所拥有的大致相同，但我认为更容易阅读：

  // any time the pageToRender changes, let's fetch it
  useEffect(() => {
    fetchList();
  }, [searchstate.pageToRender]);

  // this resets our search and kicks off a re-fetching of the first page
  const startSearch = () => {
    setState((prevState) => ({
      ...prevState,
      nextPage: 0,
      pageToRender: 0,
      userlist: []
    }));
  };

  // will increment pageToRender, loading the next page.
  // You may want to ensure ordering in case two calls
  // to increment are resolved in the wrong order.
  const increment = () => {
    setState((prevState) => ({
      ...prevState,
      pageToRender: prevState.nextPage
    }));
  };