Javascript 在下一次渲染中获取数据时出现钩子

我使用SendFormData创建了一个钩子，当我使用它时，会得到无效的钩子调用

• 钩取

• 来自SubmitForm的数据

• url:string

• 方法：邮寄或邮寄

• 成功：如果消息成功，则成功消息

• id：不是必需的，但如果项具有id，则将i添加到api调用中

• auth default false

问题是它会在渲染时丢失数据，我不知道如何更好地描述它，所以我制作了console.log ss 正如你们在第二次通话中看到的，我得到了数据，但后来它消失了

我的代码是：

    const sendFormData = async ({
    formData,
    url,
    method,
    success,
    id,
    auth = false,
  }) => {
    const setPartData = (partialData) => setData({ ...data, ...partialData });
    try {
      let response;
      if (method === "post") {
        response = await axios.post(
          `${SERVER_API}api/v1/${url}/${id ?? ""}`,
          formData
        );
      } else if (method === "put") {
        response = auth
          ? await fetchContext.authAxios.post(
              `${SERVER_API}api/v1/${url}/${id ?? ""}`,
              formData
            )
          : await axios.post(
              `${SERVER_API}api/v1/${url}/${id ?? ""}`,
              formData
            );
      }
      setPartData({
        data: response.data,
        loading: false,
        success,
        error: null,
      });
    } catch (err) {
      const { data } = err.response;
      setPartData({
        error: data.error,
        success: null,
        loading: false,
      });
    }
    return data;
  };

  return {
    sendFormData,
  };
};

在哪里使用它，它从SubmitForm获取数据并使用它进行api调用，正如您在ss i get Three undefined中看到的：

const { sendFormData } = useSendFormData()


const handleForm = async (info) => {
  // here you have your response.data returned
  const data = await sendFormData({
    formData: info,
    url: "auth/forgot-password",
    method: "post",
    success: "A password reset message has been sent to your email",
  });

  console.log(data);

  reset();
};

如果你能帮忙，那就太棒了。如果你有任何关于这个钩子的优化建议，请告诉我。谢谢你的时间

Edit：编辑钩子，但不返回末尾的数据值TL；DR

const setPartData=（partialData）=>setData（{…data，…partialData}）；

应改为

const setPartData=（partialData）=>setData（data=>（{…data，…partialData}））；

解释

setState

callback可以采用新的状态（您所做的），也可以采用另一个回调（应该做的）。您应该像这样传递回调，以确保

sendFormData

中对

setPartialData（someData）

的多个调用使用最新的

data

状态来更新自身（组合

partialData

）。这种方法是必要的，因为声明了

const sendFormData=（）=>{}

，其中使用的

data

变量是函数块之外的任何

data

变量（从

const[data，setData]=useState（）

）。此

数据

不会在

sendFormData（）

运行时更新，而仅在组件渲染周期结束时更新

换句话说,

const[data，setData]=useState（initialData）；
const sendFormData=（）=>{
const setPartData=（partialData）=>setData（{…data，…partialData}）；
setPartData（data1）；//与initialData组合
setPartData（data2）；//也与initialData组合
}

请注意，声明

const setPartData

的位置无关紧要，只要它可以访问

data

范围

另一方面,

const setPartData=（partialData）=>setData（data=>（{…data，…partialData}））；

当需要运行

setData（）

时，通过内部回调访问最新的

data

状态

由于您构建的钩子可以返回

数据

状态，因此一旦正确更新，您现在可以以更好的方式使用它

//App.js
const{data，sendFormData}=useSendFormData（）；
const sendAction=async（arg）=>wait-sendFormData（arg）；
返回
发送数据
{data.success | | someCondition？数据：null}

---

---

重新发明轮子可能不是一个好主意，但我建议您努力使代码干燥。

您能否明确说明是什么导致渲染，即丢失数据的渲染？它是否与

handleForm

末尾的

reset（）

调用有关？

reset（）

实际上做什么？reset（）来自react hook表单，它是提交后唯一的重置表单值。我认为这可能只是简单的变量混淆。请注意，

sendFormData

函数仅返回

undefined

，而与成功/错误的api调用无关。因此

data=wait sendFormData（）

中的

data

将始终是

undefined

（位于控制台日志中）。显示带有实际内容的

数据的控制台日志可能来自
控制台。在
useSendFormData
钩子中调用log（data）
，然后返回数据本身。我建议稍微重命名变量，并仔细检查哪些函数返回什么类型的内容。进行了更改，但没有help@98sean98添加对代码的编辑但steal不起作用非常感谢您的回答，但我有一个问题，我是否可以只返回sendFormData中的状态（数据）而不使用sendFormData？是的。只需
在
使用sendFormData
的末尾返回{data，sendFormData}
。但是请注意，
数据
状态不会在不同组件中的多个
useSendFormData（）
实例之间共享。如果需要共享
数据
，请使用或。如果要使用
sendFormData
，则为所做的挂钩返回
数据
，可以帮助您避免每次在不同组件中声明
const[data，setData]=useState（）。