React.js中如何正确显示并获取searchLength的当前最新值？

React 中 useState 返回的状态更新函数是异步批量执行的：

• 调用setSearchLength后，React 不会立刻修改当前作用域下的searchLength变量，而是将更新请求加入队列，等当前所有同步代码执行完成后再批量更新状态、触发组件重渲染
• 如果你在setSearchLength之后直接打印当前作用域下的searchLength，拿到的是本次函数执行时闭包捕获的旧值，并不是更新后的结果

根据你的使用场景可以选择以下三种方案：

1. 直接使用接口返回的新值处理逻辑
   如果只是需要本次接口返回的长度做打印、运算等操作，不需要依赖state，可以直接读取接口返回值，不需要等state更新：

const [searchLength, setSearchLength] = useState(0);

function search_users () {
    Axios.get(url + '?username_like=' + searchString)
    .then(function (response) {
        const newLength = response.data.length;
        setSearchLength(newLength);
        // 直接使用新值处理逻辑
        console.log(newLength);
    })
}

2. 用useEffect监听状态变化
   如果需要在searchLength更新完成后执行后续逻辑，可以监听状态变化，更新后自动触发回调：

const [searchLength, setSearchLength] = useState(0);

// searchLength更新后自动执行回调
useEffect(() => {
  console.log('更新后的searchLength：', searchLength);
  // 其他需要用到最新searchLength的逻辑都可以写在这里
}, [searchLength])

function search_users () {
    Axios.get(url + '?username_like=' + searchString)
    .then(function (response) {
        setSearchLength(response.data.length);
    })
}

3. 用useRef做状态同步备份
   如果需要在任意位置随时读取最新的searchLength值，可以用ref做同步映射：

const [searchLength, setSearchLength] = useState(0);
const searchLengthRef = useRef(searchLength);

// 状态更新时同步更新ref的值
useEffect(() => {
  searchLengthRef.current = searchLength;
}, [searchLength])

function search_users () {
    Axios.get(url + '?username_like=' + searchString)
    .then(function (response) {
        setSearchLength(response.data.length);
        // 任意位置都可以通过ref拿到最新的状态值
        console.log(searchLengthRef.current);
    })
}

内容的提问来源于stack exchange，提问作者Boidurja Talukdar