React useState异常：获取服务端数据后状态未即时更新问题

React 的 setState 是异步操作，调用 setContainersList(response.data.features) 后，containersList 不会立刻更新。你紧接着执行的 console.log 拿到的还是更新前的旧状态值，这就是两次输出不一致的核心原因。

方法1：监听状态变化执行地图重渲染 #

如果需要在 containersList 更新后触发地图重渲染，或者确认最新状态，可以新增一个 useEffect 监听 containersList 的变化：

const [containersList, setContainersList] = useState([]);

// 原有的请求逻辑，props变化时拉取数据
useEffect(() => {
  async function fetchContainerLocation() {
    const response = await CoordinatesService.getContainersPosition();
    console.log('response = ', response.data.features);
    setContainersList(response.data.features);
  }
  fetchContainerLocation();
}, [props.operationsList]);

// 监听containersList变化，触发地图更新
useEffect(() => {
  console.log('更新后的containersList = ', containersList);
  // 在这里调用地图API的重渲染方法，比如：
  // mapRef.current.updateContainerMarkers(containersList);
}, [containersList]);

方法2：直接使用接口返回数据（无需等状态更新） #

如果地图渲染逻辑可以直接使用接口返回的新数据，不必依赖状态更新，可以在请求完成后直接操作地图，再更新状态：

useEffect(() => {
  async function fetchContainerLocation() {
    const response = await CoordinatesService.getContainersPosition();
    const newContainers = response.data.features;
    console.log('response = ', newContainers);
    // 先直接用新数据更新地图
    // mapRef.current.updateContainerMarkers(newContainers);
    // 再更新状态
    setContainersList(newContainers);
  }
  fetchContainerLocation();
}, [props.operationsList]);

补充说明 #

React 异步更新状态是为了批量处理状态变更、减少不必要的组件重渲染，提升性能。你之前的代码里，containersList 其实会在组件下一次渲染时完成更新——如果地图还是没正确显示，需要检查地图组件是否正确依赖 containersList 做渲染，或者是否需要手动触发地图的重渲染逻辑。

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