Reactjs useffect与异步函数的正确使用

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

  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);
    }

---

通过将逻辑移动到

startSearch

，您可以稍微简化现有的内容，但仍然需要一个useffect来调用fetchList。我已经把“下一页”分成了“下一页”和“寻呼机”。这与您的大致相同，但我认为更容易阅读：

  // 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
    }));
  };

---

我写道：“对于类，我会简单地通过回调来实现这一点：”但是对于钩子，回调不起作用！const[searchstate，setState]=使用状态（initialState）；啊，你完全正确。我做了相应的更新，但不太好看。