reactjs

Question

我想实时更新 setState，但由于状态更新是一个异步过程，这让我很难过。我可以请求您的帮助，以便我可以在单击按钮时更新状态。

这是我的代码：

const [dependentSystems, setdependentSystems] = useState([]);

const getDependentSystems = async() => {
   const response = await axios.get('/GETAPI' + selectedSysID.SYSTEMID)
   console.log("LIST OF DEPENDENT SYSTEM", response.data)
   setdependentSystems(response.data)
}

JSX部分

<IconButton>
  <Icon
    onClick={() => selectedSystem(row,'AddDep')}
  />
  <Icon>
<IconButton>

selectedSystem

const [selectedSystemID, setselectedSystemID] = useState('');
let selectedSysID;
const selectedSystem = (row,action) =>{
  selectedsysID = {...selectedSystemID, 'SYSTEMID':row.SYSTEMID}
  getDependentSystems();
  
  (action === 'AddDep') ? openModal() : openOtherModal()
}

这是console.log

的结果

我想在第一次触发或实时调用 getDependentSystems 时将 response.data 的结果保存在 array 中，以便我可以通过单击编辑按钮的时间。发生的事情是我需要再次关闭模态然后再次编辑以显示依赖系统

希望你能帮我解决这个问题。谢谢

Answer 1

只需将 getDependentSystems 作为按钮的 onClick 处理程序。

    const [dependentSystems, setdependentSystems] = useState([]);

    const getDependentSystems = async () => {
        const response = await axios.get('/GETAPI' + SYSTEMID)
        console.log("LIST OF DEPENDENT SYSTEM", response.data)
        setdependentSystems(response.data)
    }

在 JSX 部分：

    return <button onClick={getDependentSystems}>GET SYSTEM</button>

Answer 2

试图打开模式并期望看到状态值你只是排队将永远不会工作，由于方式React 异步处理排队状态更新。

然后我的建议是将模态打开触发放入 setTimeout 调用中，以便该函数可以完成并允许 React 处理排队的状态更新。足以让超时回调在状态更新处理后的滴答上执行，几乎任何超时都应该足够了，但这有点 hackish 并且显然您需要针对您的应用进行微调。

const selectedSystem = (row, action) => {
  selectedsysID = {...selectedSystemID, 'SYSTEMID':row.SYSTEMID}
  getDependentSystems();
  
  setTimeout(() => {
    (action === 'AddDep') ? openModal() : openOtherModal();
  }, 17); // delay by about 1 minimum render cycle
};

另一种方法是将动作存储在状态中，并使用 useEffect 挂钩在打开模式时发出副作用。

const [savedAction, setSavedAction] = useState();
const [dependentSystems, setDependentSystems] = useState([]);

const getDependentSystems = async (action) => {
  const response = await axios.get('/GETAPI' + selectedSysID.SYSTEMID);
  console.log("LIST OF DEPENDENT SYSTEM", response.data);
  setDependentSystems(response.data);
  setSavedAction(action);
};

useEffect(() => {
  if (savedAction) {
    (action === 'AddDep') ? openModal() : openOtherModal();
    setSavedAction(null);
  }
}, [savedAction]);

const selectedSystem = (row, action) => {
  selectedsysID = {...selectedSystemID, 'SYSTEMID':row.SYSTEMID}
  getDependentSystems(action);
};

reactjs - 用数组值更新 setState

reactjs - update setState with array values

setstate

react-hooks