Select组件onChange调用函数过快 useState首次取值失效如何解决

问题根因 #

React的useState提供的setter函数是异步批量执行的，调用setProjetName后，当前函数作用域内的projetName变量不会立刻更新，要等到下次组件重渲染才会拿到最新值，所以你当前调用getClientByProject时读取的还是更新前的旧值，就出现了滞后一次的问题。

可选解决方案 #

方案1：将选中的新项目作为参数传递给请求函数（最推荐，无额外性能开销） #

直接在onChange回调里拿到新的项目值，同时传给状态更新函数和请求函数，不需要依赖当前作用域的旧state值。
修改代码如下：

1. 调整请求函数，新增入参接收项目值：

// 新增project入参
function getClientByProject(project) {
     axios
        // 直接使用入参的id，不读取当前作用域的projetName
        .get(API_URL_CLIENT_BY_ACTIVITE + project.id)
        .then((response) => {
            if(response.status === 200) {
                setClient(response.data);
                console.log('Response : ', response.data);
            }
        })
        .catch((error) => {
            console.log(error);
        })
}

2. 修改onChange回调，把新值传入请求函数：

const handleSelectProjectChange =  (event) => {
    const newProject = event.target.value;
    setProjetName(newProject);
    // 直接传入最新的项目值
    getClientByProject(newProject);
};

方案2：用useEffect监听projetName变化自动触发请求 #

如果你有多个场景都需要触发项目对应的客户查询，可以用useEffect监听projetName的变化，值更新后自动发起请求：

1. 保留原请求函数，新增useEffect逻辑：

useEffect(() => {
  // 避免初始空对象时发起无效请求
  if (projetName?.id) {
    getClientByProject();
  }
}, [projetName]) // 依赖项设置为projetName，值变化就执行回调

2. onChange回调只需更新状态，无需手动调用请求：

const handleSelectProjectChange =  (event) => {
    setProjetName(event.target.value);
};

内容的提问来源于stack exchange，提问作者Youssef Hammouma