反应中的对象克隆

Question

我正在制作一个简单的react应用程序，它有一些基本的输入，如first name、last name等。

输入的状态在上下文api中处理，类似于，

context.js

import React, { useState } from "react";

export const FormContext = React.createContext();

export function FormProvider({ children }) {
  const [formValue, setFormValue] = useState({
    basicDetails: {
      firstName: "",
      lastName: "",
      address: {
        city: "",
        zip: ""
      }
    }
  });

  return (
    <FormContext.Provider value={[formValue, setFormValue]}>
      {children}
    </FormContext.Provider>
  );
}

在获取上下文的基本细节组件中，

  const [value, setValue] = React.useContext(FormContext);
  const { basicDetails } = value;

在这里，为了复制上下文的初始值，我尝试使用spread操作符，例如，

  const initialValue = { ...value };

在handleSubmit函数中，尝试获取最初复制的值(即.) initialValue，但这是记录最新更改的值。

工作示例：

​

​

需求

在单击表单提交时，我需要使用初始上下文数据重置表单值。

为了实现将值重置为初始数据，我尝试过扩展操作符{ ...value }，但我认为这种方法是错误的。

即使JSON.parse(JSON.stringify(value))在这种情况下也不起作用。

任何人都可以帮助我在提交时将表单值设置为初始上下文。

Answer 1

这里的另一个答案似乎足够了。您还可以将初始字段值保存在React (const initialValue = React.useRef(value);)中，然后以initialValue.current的形式进行访问。

实际上，您希望您的上下文能够更好地控制上下文状态。我建议创建一个reset函数，以便将其包含在孩子可以使用的上下文中。

context.js

计算出初始状态定义，提供默认上下文值，并将状态和回调传递给上下文值。

const initialFormState = {
  basicDetails: {
    firstName: "",
    lastName: "",
    address: {
      city: "",
      zip: "123"
    }
  }
};

export const FormContext = React.createContext({
  formValue: initialFormState,
  setFormValue: () => {},
  reset: () => {}
});

export function FormProvider({ children }) {
  const [formValue, setFormValue] = useState(initialFormState);

  const reset = () => setFormValue(initialFormState);

  return (
    <FormContext.Provider
      value={{ value: formValue, setValue: setFormValue, reset }}
    >
      {children}
    </FormContext.Provider>
  );
}

basicDetails.js

使用和分解上下文值。将submit按钮更改为type="submit"，以便您可以提交表单，并在submit处理程序中调用reset来重置表单状态。

const BasicDetails = () => {
  const {value, setValue, reset} = React.useContext(FormContext);
  const { basicDetails } = value;

  const handleInputChange = (event) => {
    const { name, value: val } = event.target;
    setValue((prev) => {
      const basicDetails = {
        ...prev.basicDetails,
        ...(value.basicDetails[name] !== undefined
          ? { [name]: val }
          : { address: { ...value.basicDetails.address, [name]: val } })
      };
      return { ...prev, basicDetails };
    });
  };

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

    // Do what you need with the current form values
    console.log("Values", value);

    // Finally reset the form
    e.target.reset();
  };

  return (
    <div>
      <h1> Basic Details </h1>
      <form onSubmit={handleSubmit} onReset={reset}>
        <label htmlFor="firstName">First Name: </label>
        <input
          type="text"
          className="form-control"
          id="firstName"
          name="firstName"
          value={basicDetails.firstName}
          onChange={handleInputChange}
        />
        <br />
        <br />
        <label htmlFor="lastName">Last Name: </label>
        <input
          type="text"
          className="form-control"
          id="lastName"
          name="lastName"
          value={basicDetails.lastName}
          onChange={handleInputChange}
        />
        <br />
        <br />
        <label htmlFor="lastName">City: </label>
        <input
          type="text"
          id="city"
          name="city"
          value={basicDetails.address.city}
          onChange={handleInputChange}
        />
        <br />
        <br />
        <label htmlFor="lastName">Zip: </label>
        <input
          type="text"
          className="form-control"
          id="lastName"
          name="zip"
          value={basicDetails.address.zip}
          onChange={handleInputChange}
        />
        <br />
        <br />
        <button type="submit">
          Submit
        </button>
      </form>
    </div>
  );
};

​

​

Answer 2

如果您只希望始终将initialValue作为第一次值，则需要这样做：

const initialValue = useMemo(() => value, []);

作为代码，每当值发生变化时，函数都会运行，所以每次值发生变化时，initialValue都会发生变化。