React.js中handleSubmit时useState无法设置状态的问题求助

你遇到的问题是React useState的异步特性导致的：调用setServerList后，状态不会立刻更新，所以紧接着的console.log(serverList)打印的还是更新前的空数组。

1. 用useEffect监听状态变化 #

如果需要在serverList更新完成后执行逻辑（比如打印、处理数据），可以通过useEffect监听这个状态，当它变化时触发回调：

import { useEffect } from 'react';

// 在组件内部添加
useEffect(() => {
  console.log('更新后的serverList:', serverList);
  // 这里可以写状态更新后的业务逻辑
}, [serverList]); // 依赖数组指定serverList，只有它变化时才执行

2. 直接打印接口返回值 #

如果只是想确认接口返回的数据是否正确，不需要等状态更新，直接在searchHost里打印data.data即可：

if (data.success === true) {
  if (data.data != null && (data.data.length > 0)) {
    setServerList(data.data);
    console.log('接口返回的数据:', data.data); // 直接打印接口返回值
  } else {
    setServerList([])
    console.log('no data found, status code: ', response.status);
  }
}

3. 明确状态更新的异步逻辑 #

React会批量处理状态更新，同一函数调用中多次更新状态，或者更新后立刻访问状态，都只能拿到旧值。只有当组件重新渲染后，才能获取到更新后的新状态。你的handleChange函数里调用searchHost后立刻打印serverList，就是因为这个时机状态还没完成更新。

内容的提问来源于stack exchange，提问作者James Sapam