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

您可以通过将逻辑移至page.getByXPath("//div[@class='AnimatedForm']")来简化您的工作，但是仍然需要useEffect来调用fetchList。我继续将“ nextPage”拆分为“ nextPage”和“ pageToRender”。它与您所拥有的大致相同，但我认为它更容易阅读：

startSearch

useeffect与异步功能正确使用

1 个答案: