老师您好，有个问题很疑惑

来源：4-6 【副作用钩子】useEffect 使用指南

柠檬树想长高

2021-03-15

我的项目有很多列表搜索，大概就是这样的。
图片描述
页面交互是，输入搜索条件，点击搜索查询数据，所以一开始我想代码逻辑应该是：
先用useState里面的state更新函数更新搜索条件，
然后调用接口请求数据。

//搜索
let search = () => {
    setSearchData(Object.assign({}, searchData, {
        page: 1,//更新参数的分页page
    }))

    getList()//这是请求数据的方法
}

但是由于state更新是异步，所以在请求接口的时候state并没有被更新，而且也没有回调。
按照您的课程，应该在useEffect里面处理getList()

//监听searchData
useEffect(() => {
    getWaybillList()
}, [searchData])

可是如果这样，搜索按钮不就没有意义了吗？只要更新searchData，就能够自动被监听，然后请求接口，这样完全不需要搜索按钮了。
请问是这样吗？

写回答

2回答

_Jack_Han_

2021-03-28

如果按照你的思路，应该这样写：

const search = () => {
setSearchData(

Object.assign(

{},

searchData,

            {
         page: 1,//更新参数的分页page
          }

getList

);
};

阿莱克斯刘

2021-03-17

这就完全看你的需求了，按照你目前的做法，每次searchData改变都会引发getWaybillList()函数的调用，这样处理对后端的开销是极大的。

正常来说应该给searchData的监听做一个debounce，限制一下每次键盘输入的时间间隔，比如说只有键盘连续敲击过程中停顿1秒以上才做api请求。

不过，也可以不要这么复杂，我们可以换个思路，不使用useEffect，而是通过监听search按钮来触发api请求，然后把响应数据绑定在组件的state中。

Pseudocode 如下：

const Compnent = () => {
    const [listData, setListData] = useState([])
    //搜索    
    let search = async () => {        
       setSearchData(Object.assign({}, searchData, {page: 1}))
       const data = await getList() //这是请求数据的方法
       setListData(data)  // 注意这里，绑定数据  
    }
    return (<>
        <list data={listData}> 
        <search-button onclick={search}>   
    </>)
}

柠檬树想长高

是的老师，我用vue一直都是通过search按钮点击去请求接口的，但是在react里面，按照老师你这么写，执行const data = await getList()的时候，searchData肯定是旧数据，因为setSearchData是异步的

2021-03-28

共1条回复

React18 系统精讲结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发，获取必备技能

1993 学习 · 1015 问题

查看课程

相似问题

老师您好：按您的教程 Redux ToolKit写完了，然后报错了

回答 1

后端接口好像出问题了，注册或登录都会返回400bad request