单击按钮时实时获取或保存 axios.get 对 setState 的响应

Question

我正在开发编辑/更新功能，我想做的是在我单击表中的特定行后立即将 axios.get 的响应保存到 setState。

const [dataSystem, setdataSystem] = useState([])
const [systemDetails, setsystemDetails] = ({
   ID: '',
   .....,
})

const getAllSystems = async() => {
  ......
}

const getDependentSystems = async() => { //this is being triggered by a handleselectedSysDep when a row selected
   const response = await axios.get('/API' + ID) //ID is being passed by handleselectedSysDep  from the selected row
   console.log('LIST OF SYSTEM', response.data)
   setdataSystem(response.data)
}

const [selectedSystemID, setselectedSysID] = useState('');
let selectedSysID;
const handleselectedSysDep = (ID, action) => { //will be triggered when a row selected
   setsystemDetails(ID);
   selectedSysID = {...selectedSystemID, 'ID': ID.ID}
   getDependentSystems();
}

useEffect(() => {
   getAllSystems ();
})

我想要的是当getDependentSystems() 被调用时，setdataSystem 将被立即填充以显示 API 的响应数据，因为我正在进行编辑。希望你能帮我解决这个问题。

这是console.log('LIST OF SYSTEM', response.data)的结果

谢谢

Answer 1

这看起来是一个很好的用例，可以使用 useEffect 挂钩来监视 systemDetails 的变化并执行您的 getDependentSystems() 副作用。

例如

const [dataSystem, setDataSystem] = useState([])
const [systemDetails, setSystemDetails] = ({
  ID: '',
  //.....,
})

const handleselectedSysDep = (ID, action) => {
  setSystemDetails(ID); // assuming `ID` is an object
}

// Now add an effect to watch for `systemDetails` changes
useEffect(() => {
  if (systemDetails.ID) {
    axios.get(`/API/${systemDetails.ID}`).then(({ data }) => setDataSystem(data))
  }
}, [ systemDetails ]) // ? note the dependencies array

您也可以使用this answer 仅在初始渲染后触发useEffect 挂钩。

---

仅供参考，如果您只希望 getAllSystems() 在您的组件安装时执行一次，您应该使用

useEffect(() => {
  getAllSystems()
}, []) // ? note the empty array