React中useState值无法更新，Axios请求报400错误求助

问题描述 #

在同一页面复用Table组件时，点击表格行需将对应ID同步到父组件，同时尝试用useState维护accountLicenseId，但该值始终保持初始空值，导致Axios GET请求因URL中ID为空返回400错误，控制台打印accountLicenseId为空。

报错信息：

AxiosError {message: 'Request failed with status code 400',
name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

代码问题点 #

1. useEffect执行时机错误：useEffect依赖项为空数组，仅在组件挂载时执行一次，此时accountLicenseId为初始空字符串，请求URL变为/license/all/，触发后端参数校验错误（400）。
2. 行选择事件未绑定：ReactDataGrid未配置行选择触发的回调，onLicensesSelect函数从未被调用，点击行不会更新accountLicenseId。
3. 未定义变量：代码中headers和rowsText未定义，会导致组件渲染报错。

修复方案 #

1. 更新useEffect依赖：将accountLicenseId加入useEffect依赖数组，确保ID变化时重新发起请求，同时增加空值判断避免无效请求。
2. 绑定行选择事件：给ReactDataGrid添加onSelectionChange属性，关联onLicensesSelect函数，处理行选择逻辑。
3. 补全未定义变量：补充表头配置示例，添加行数文本的逻辑处理。
4. 规范父组件回调命名：改用明确的回调函数名（如onAccountLicenseIdChange），避免与状态变量命名混淆。

完整修复代码 #

import React, { useEffect, useCallback, useState } from 'react';
import '@inovua/reactdatagrid-community/index.css';
import axios from 'axios';
import ReactDataGrid from '@inovua/reactdatagrid-community';
import './table.css';

// 示例表头，可根据实际业务调整
const headers = [
  { name: 'id', header: 'ID', defaultWidth: 100 },
  { name: 'name', header: '许可证名称', defaultWidth: 200 },
  // 其他列配置...
];

const Table = (props) => {
    const [accountLicense, setAccountLicense] = useState([]);
    const [accountLicenseId, setAccountLicenseId] = useState("");

    // ID变化时重新请求数据，空值时跳过请求
    useEffect(()=>{
        if (!accountLicenseId) return;
        
        axios.get(`${process.env.REACT_APP_API_URI}/license/all/${accountLicenseId}`)
        .then(res=>{
            setAccountLicense(res.data);
        })
        .catch(e=>console.log(e));
    }, [accountLicenseId])

    const onLicensesSelect = useCallback(({ selectedData }) => {
        // 单选场景下取第一条选中数据
        const selectedRow = selectedData[0];
        if (!selectedRow) return;

        // 同步数据到父组件
        props.selectedAccount(selectedRow);
        props.onAccountLicenseIdChange(selectedRow.id);
        // 更新组件内部状态
        setAccountLicenseId(selectedRow.id);
    }, [props.selectedAccount, props.onAccountLicenseIdChange])

    // 行数统计文本
    const rowsText = `共 ${accountLicense.length} 条数据`;

    return(
        <div>
            <ReactDataGrid
                idProperty='id'
                columns={headers}
                dataSource={accountLicense}
                theme='default-light'
                rtl={true}
                enableSelection={true}
                selectionType='single'
                onSelectionChange={onLicensesSelect}
            />
            <div className='info'>{rowsText}</div>
        </div>
    )
}

export default Table

父组件使用示例 #

import Table from './Table';

const ParentComponent = () => {
    const handleAccountSelect = (account) => {
        // 处理选中的账户数据逻辑
        console.log('选中账户：', account);
    };

    const handleLicenseIdChange = (id) => {
        // 处理同步过来的许可证ID逻辑
        console.log('许可证ID：', id);
    };

    return (
        <Table 
            selectedAccount={handleAccountSelect}
            onAccountLicenseIdChange={handleLicenseIdChange}
        />
    );
};

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