如何在 React 中正确设置 object 挂钩？

Question

我有这些状态：

const [maintenanceTypeId, setMaintenanceTypeId] = useState(null);
const [maintenanceId, setMaintenanceId] = useState(null);

const [addedId, setAddedId] = useState({
    mainId : null,
    mainTypeId : null,
  });

我在这些函数中设置状态： //setMaintenanceTypeId //setAddedId

const addNewMainTypesList = async () => {
    try {
      const { data } = await axios.post(`${serverBaseUrl}/insertRowtoMainTypes`, {
        description: newMaintenanceList.description,
        title: newMaintenanceList.title
      });
      setMaintenanceTypeId(data[0]?.id);
      console.log("MaintenanceTypeId", maintenanceTypeId);
      //console.log("inserted type id",data[0]?.id);
      setAddedId({...addedId, mainTypeId : maintenanceTypeId});
    } catch (err) {
      throw err;
    }

    const maintenanceList = await getMainTypes();
    // console.log("main list", maintenanceList);
    setMaintenanceList(maintenanceList);
  };

//setMaintenanceId //setAddedId

const addNewMainTypes = async () => {
    try {
      const { data } = await axios.post(`${serverBaseUrl}/insertRowtoMain`, {
        nodeid: newMaintenance.nodeid,
        maintenancetype: newMaintenance.maintenancetype,
        personnel: newMaintenance.personnel,
        process: newMaintenance.process,
        date: newMaintenance.date,
      });
      setMaintenanceId(data[0]?.id);
      console.log("MaintenanceId", maintenanceId);
      setAddedId({...addedId, mainId : maintenanceId});
      //console.log("inserted main id",data[0]?.id);
      
    } catch (err) {
      throw err;
    }

我正在控制台将 addedId state 记录在 submitHandler 中。

 const submitHandler = (e) => {
    e.preventDefault();

    addNewMainTypesList();
    getMain();
    getMainTypes();
    addNewMainTypes();


    console.log("addedId",addedId);

  }

这是控制台。 如您所见，我无法获得maintenanceTypeId 。 我怎样才能解决这个问题？

Answer 1

setState是一个异步 function。 换句话说，它不会直接更新给定的 state。

在您的情况下setMaintenanceTypeId不是直接更新maintenanceTypeId 。

为了使其直接更新，请在其中使用匿名 function，如下所示：

setMaintenanceTypeId(mTypeId => data[0]?.id);

如果你对setAddedId做同样的事情也会更好（虽然不是强制性的）：

setAddedId(addedId => {...addedId, mainTypeId : maintenanceTypeId});

如果这仍然不起作用，请告诉我。