点击表格行触发axios.get后如何实时存响应到useState实现编辑功能

核心问题原因 #

• 未给useEffect添加空依赖数组，组件每次渲染都会触发getAllSystems，如果该方法内也修改了dataSystem状态，会直接覆盖你接口查询到的结果
• getDependentSystems未显式接收ID参数，逻辑存在隐患
• systemDetails状态更新逻辑错误，直接将ID赋值给了对象类型的状态
• 多余声明了普通变量selectedSysID，组件重渲染时会被重置，无法正常保存值

修正后完整代码 #

const [dataSystem, setdataSystem] = useState([])
// 状态初始化保留你原有字段
const [systemDetails, setsystemDetails] = useState({
   ID: '',
   // 其余原有字段不变
})
const [selectedSystemID, setselectedSysID] = useState('');

const getAllSystems = async() => {
  // 保留你原有逻辑不变
}

// 新增ID入参
const getDependentSystems = async(ID) => {
   const response = await axios.get('/API' + ID)
   console.log('LIST OF SYSTEM', response.data)
   setdataSystem(response.data)
}

const handleselectedSysDep = (ID, action) => {
   // 正确更新对象类型状态，保留原有字段
   setsystemDetails(prev => ({...prev, ID: ID.ID}));
   setselectedSysID(ID.ID);
   // 传入ID调用查询接口
   getDependentSystems(ID.ID);
}

// 加空依赖数组，只在组件挂载时执行一次
useEffect(() => {
   getAllSystems();
}, [])

可选校验逻辑 #

如果修改后仍然看不到渲染结果，可以添加下面的代码验证状态是否更新成功：

// 监听dataSystem变化
useEffect(() => {
  console.log('dataSystem最新值：', dataSystem)
}, [dataSystem])

如果控制台能打印到最新的接口返回值，说明状态更新正常，检查你页面上渲染dataSystem的逻辑是否正确即可。

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