函数式组件中获取更新后state数据的问题

你遇到的是React Hooks闭包陷阱，完全不用切换到类组件，函数式组件通过正确的依赖管理或useRef就能解决这个问题。

问题根源 #

函数组件每次渲染时，会重新创建内部的函数和变量。你的seeUpdatedLocations和用useCallback包裹的handleSelectChange因为没有正确设置依赖，捕获的是组件初始渲染时的locationOptions闭包——哪怕后续state更新了，这些函数里拿到的还是旧的state值。

具体解决方法 #

1. 修复seeUpdatedLocations函数 #

方法一：用useRef保存最新state

useRef的.current属性不会触发组件渲染，能始终同步最新的state值：

function HomePage(){
    const [selected, setSelected] = useState({});
    const [locationOptions, setLocationOptions] = useState([
        {label: 'Location 1', value: 'location-1'},
        {label: 'Location 2', value: 'location-2'},
        {label: 'Location 3', value: 'location-3'},
    ]);
    // 创建ref保存最新的locationOptions
    const locationOptionsRef = useRef(locationOptions);

    // 同步state到ref
    useEffect(() => {
        locationOptionsRef.current = locationOptions;
    }, [locationOptions]);

    // ... 其他代码不变

    const seeUpdatedLocations = () => {
        // 从ref里拿最新值
        console.log(locationOptionsRef.current);
    }

    // ... 剩余代码
}

方法二：直接定义函数（无需额外包裹）

如果这个函数不需要作为props传递给子组件，直接定义即可——每次组件渲染时都会生成新的函数实例，自然能拿到最新的state：

const seeUpdatedLocations = () => {
    console.log(locationOptions);
}

2. 修复handleSelectChange函数 #

useCallback的依赖数组必须包含locationOptions，这样当state更新时，useCallback会重新生成函数，捕获最新的locationOptions：

const handleSelectChange = useCallback((value) => {
    let selectedLocationObj = _.find(locationOptions, (o) => o.value == value);
    console.log(selectedLocationObj);
    // 别忘了更新selected state
    setSelected(selectedLocationObj || {});
}, [locationOptions]); // 加入依赖

优化方案：直接用react-query返回的数据

既然你用react-query获取数据，其实可以直接用locationData（react-query缓存的最新数据）来查找，不用依赖state，减少不必要的同步：

const handleSelectChange = useCallback((value) => {
    // 直接用locationData.data查找，无需依赖state
    let selectedLocationObj = _.find(locationData?.data, (o) => o.value == value);
    console.log(selectedLocationObj);
    setSelected(selectedLocationObj || {});
}, [locationData]); // 依赖react-query的data

完整修改后的代码示例 #

import { useState, useEffect, useCallback, useRef } from 'react';
import _ from 'lodash';

function HomePage(){
    const [selected, setSelected] = useState({});
    const [locationOptions, setLocationOptions] = useState([
        {label: 'Location 1', value: 'location-1'},
        {label: 'Location 2', value: 'location-2'},
        {label: 'Location 3', value: 'location-3'},
    ]);
    const locationOptionsRef = useRef(locationOptions);

    useEffect(() => {
        locationOptionsRef.current = locationOptions;
    }, [locationOptions]);

    const { data: locationData, refetch: locationDataRefetch } = useAppQuery({
        url: "/api/get-locations", 
        reactQueryOptions: {
            onSuccess: async (e) => {
              if (e.data) {
                setLocationOptions(e.data);
              } else {
                // handle errors
              }
            },
          },
      });

    const seeUpdatedLocations = () => {
        console.log(locationOptionsRef.current);
    }

    const handleSelectChange = useCallback((value) => {
        let selectedLocationObj = _.find(locationOptions, (o) => o.value == value);
        console.log(selectedLocationObj);
        setSelected(selectedLocationObj || {});
    }, [locationOptions]);

    return (
        <Select
            label="Location"
            options={locationOptions}
            onChange={handleSelectChange}
            value={selected.value}
            labelHidden={true}
        />
    );
}

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