Question

我有一个Formik表格来更新状态。但是，我只能在再次点击“提交”时使用该状态。

 onSubmit={(values) => {
          addData(values);
          console.log(data);
        }}>

  const addData = (billing) => {
    setData((currentData) => {
      const shipping = {
        first_name: billing.first_name,
        last_name: billing.last_name,
        address_1: billing.address_1,
        address_2: billing.address_2,
        city: billing.city,
        state: billing.state,
        postcode: billing.postcode,
        country: billing.country,
      };
      const line_items = items;
      return {billing, shipping, line_items, ...currentData};
    });
    console.log(data);
  };

我知道值会更新，因为在我再次单击之前，如果我注释掉“ addData”功能，仍然可以看到记录的数据。但是，在我第一次点击“提交”时，这些值不会记录。我需要能够在同一函数中调用这些值，以便可以进行API调用并将其推送到数据库中。

Answer 1

假设setData来自useState钩子，它是一个异步函数，因此它不会立即更新值。

解决此问题的一种方法是使用useEffect挂钩并侦听数据变量的更改，但是在其他函数中，当您需要它时，它将无法正常工作。

您可以通过更改如下流程来解决它。

 const addData = (billing) => {
  const shipping = {
    first_name: billing.first_name,
    last_name: billing.last_name,
    address_1: billing.address_1,
    address_2: billing.address_2,
    city: billing.city,
    state: billing.state,
    postcode: billing.postcode,
    country: billing.country,
  };
  const line_items = items;
  const updatedData = { billing, shipping, line_items, ...data };

  setData(updatedData);
  console.log(updatedData);

  return updatedData;
};

这将更新状态，并返回可立即在Submit函数中使用的值。

onSubmit={(values) => {
  const updateData=   addData(values);
  console.log(updateData);
}}>

更新后只能在第二次迭代中提取/调用React Native状态

1 个答案: