React调用函数后oneDataAPI状态未更新问题求助

核心问题总结 #

1. React状态更新异步性：调用setOneDataAPI后立即访问oneDataAPI拿不到最新值，因为React状态更新是异步批量处理的。
2. 状态类型不匹配：oneDataAPI初始设为数组，但单条接口返回的是对象，类型不一致导致状态更新异常。
3. 数据未同步到输入框状态：获取到的单条数据oneDataAPI没有同步到entData，模态框输入框绑定的是entData，所以无法显示数据。
4. 异步代码写法混用：getApiOneData同时使用async/await和.then，逻辑混乱容易引发问题。

具体修复步骤 #

1. 修正状态初始值类型

把oneDataAPI和defaultEntData的初始值从数组改为对象（单条数据为对象结构）：

// 单条数据是对象，初始值设为空对象
const [oneDataAPI, setOneDataAPI] = useState({}); 

// 默认数据改为对象，而非数组
const defaultEntData = useMemo(() => ({ 
    id: 0, 
    ent_name: "", 
    ent_abbrev: "", 
}), []);

const [entData, setEntData] = useState(defaultEntData);

2. 优化异步请求写法，同步数据到输入框

重写getApiOneData，统一使用async/await，并在获取数据后直接同步到entData：

const getApiOneData = async (kid) => { 
    try {
        const response = await fetch(`${variables.API_URL}${url}/${kid}`);
        const data = await response.json();
        if (data) {
            setOneDataAPI(data);
            // 直接把单条数据同步到entData，让模态框输入框显示内容
            setEntData(data);
        }
    } catch (error) {
        console.error('获取单条数据失败:', error);
    }
};

3. 修正editClick的异步调用

因为getApiOneData是异步函数，需要用await等待执行完成，同时不要在调用后立即打印oneDataAPI（异步更新无法拿到最新值）：

const editClick = async (kid) => { 
    setModalTitle("Modifier une entité");
    // 等待数据获取完成
    await getApiOneData(kid);
    // 若要查看最新的oneDataAPI，不要在这里打印，用useEffect监听
};

4. 可选：用useEffect监听oneDataAPI变化（备选同步方案）

如果不想在getApiOneData里直接同步entData，可以用useEffect监听oneDataAPI的变化来更新entData：

useEffect(() => {
    // 当oneDataAPI有数据时，同步到entData
    if (Object.keys(oneDataAPI).length > 0) {
        setEntData(oneDataAPI);
    }
}, [oneDataAPI]);

5. 修正表格列的拼写错误

表格操作列的Headers拼写错误，应该是Header：

{ 
    id: "actions", 
    Header: "Actions", // 修正为Header，不是Headers
    Cell: ({ row }) => (
        <div>
            <button type="button" className="btn btn-light btn-sm mr-1" data-bs-toggle="modal" data-bs-target="#myModal" onClick={() => editClick(row.values.id)} >
                <i className="bi bi-pencil-square" role="img" aria-label="Edit" ></i>
            </button>
            <button type="button" className="btn btn-danger btn-sm mr-1" onClick={() => deleteClick(row.values.id)} >
                <i className="bi bi-trash" role="img" aria-label="Delete"></i>
            </button>
        </div>
    ),
}

额外说明 #

• 若想在状态更新后查看oneDataAPI的值，不要在editClick里直接console.log，而是用useEffect监听：

  useEffect(() => {
      console.log('最新的oneDataAPI:', oneDataAPI);
  }, [oneDataAPI]);
  

• 确保接口返回的单条数据是对象格式（不是数组），否则需要调整状态处理逻辑。

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