Javascript 使用React Hooks Helper设置多步骤表单的状态（链接到codesandbox）

我正在尝试使用react hook helper构建注册页。无法使用SetForm存储生成的base64字符串。能够通过下一步和上一步保持状态。感谢您的回复。 该项目的链接：

MultiStepForm.js

import { useForm, useStep } from "react-hooks-helper"

const defaultData = {
    FIRST_NAME: "",
    LAST_NAME: "",
    PHOTO: "",

const steps = [
    { id: 'details' },
    { id: 'photo' },
]
const RegistrationMultiStepForm = () => {

    const [formData, setForm] = useForm(defaultData);
    const props = { formData, setForm, navigation }
    const { step, navigation } = useStep({
        steps,
        initialStep: 0
    })
    switch (step.id) {
        case 'details':
            return <Registration_First {...props} />

        case 'photo':
            return <Registration_Second {...props} />

    }

---

“我的期望”：在用base64字符串更新{result}值时，我想调用setForm操作并将{result}的值传递给我的PHOTO字段。

在看到代码沙盒后，我发现了钩子的依赖关系：

react hooks helper

configuration same as Registration_First

 const Cropped = () => {

// this does not work which is the correct way 
   setForm((previousState) => {
      previousState.PHOTO = result
      return previousState
   })

//this works...wrong way
   formData.PHOTO = result;
}

                                             

React Hooks Helper的使用大致如下：

const [{ FIRST_NAME, PHOTO }, setValue] = useForm()
...
<input name='FIRST_NAME' value={FIRST_NAME} onChange={setValue} />

这是不正确的，并且是反模式的。状态应该是不可变的，不能直接更改。这就是为什么状态在下次状态更改之前不显示更新。您应该使用setter，以便React可以更新自身

答：因为我们使用的是react hook helpers库，所以我们需要传入它期望的数据。我们不能传入字符串，我们必须传入类似于form onChange参数对象的内容

const Cropped = () => {
  setForm({
    target: {
      name: 'PHOTO', // form element
      value: result // the data/url
    }
  })
}

完成此操作后，您应该会看到状态将自动更新。 您可以在此处看到库代码的作用：

---

注意：值得一提的是，他们已经2年没有更新这个库了。但是它看起来像是一个有文档的不错的库。所以这很好。

在看过代码沙盒之后，我发现了钩子的依赖性：

react hooks helper

React Hooks Helper的使用大致如下：

const [{ FIRST_NAME, PHOTO }, setValue] = useForm()
...
<input name='FIRST_NAME' value={FIRST_NAME} onChange={setValue} />

这是不正确的，并且是反模式的。状态应该是不可变的，不能直接更改。这就是为什么状态在下次状态更改之前不显示更新。您应该使用setter，以便React可以更新自身

答：因为我们使用的是react hook helpers库，所以我们需要传入它期望的数据。我们不能传入字符串，我们必须传入类似于form onChange参数对象的内容

const Cropped = () => {
  setForm({
    target: {
      name: 'PHOTO', // form element
      value: result // the data/url
    }
  })
}

完成此操作后，您应该会看到状态将自动更新。 您可以在此处看到库代码的作用：

---

注意：不管它值多少钱，他们已经2年没有更新这个库了。但是它看起来像一个有文档的像样的库。所以这很好。

它显示了这个错误。TypeError:无法读取undefinedit的属性“name”…by const craped=（）=>{formData.PHOTO=result；}formData应该是不可变的，因此在不使用setter的情况下重新分配它是一种反模式。虽然它在某些情况下可能会工作，但将来可能会导致其他错误。我们需要找出setForm无法按预期工作的原因。你有代码笔示例吗？你好，朋友，这是url的链接。这是完整的帮助。这是一个正在工作的示例rsion。我深入研究了依赖项的文档

react hooks helper

。发现useForm元组中的函数setForm被内联用作onChange函数。因此它需要一个包含表单元素的名称和值的对象。我将更新我的答案。它显示了此错误。TypeError:无法正确读取未定义编辑的ty'name'已工作…按常量裁剪=（）=>{formData.PHOTO=result；}formData应该是不可变的，因此在不使用setter的情况下重新分配它是一种反模式。虽然它在某些情况下可能会工作，但将来可能会导致其他错误。我们需要找出setForm无法按预期工作的原因。你有代码笔示例吗？你好，朋友，这是url的链接。这是完整的帮助。这是一个正在工作的示例rsion。我深入研究了依赖项的文档

react hooks helper

。发现useForm元组中的函数setForm是内联使用的onChange函数。因此它需要一个包含表单元素的名称和值的对象。我将更新我的答案。