在 React 中为状态设置值答案

【问题标题】：Setting Values for State in React在 React 中为状态设置值
【发布时间】：2021-12-28 01:22:47
【问题描述】：

下午好，

我在通过 useState 设置对象时遇到问题，我真的不明白为什么。下面是我用来根据 ?: 语句显示来自数据库的信息的输入。我不确定为什么状态不会更新，并且我可能没有正确处理状态。有人可以帮我理解我做错了什么吗？

  const [userUpdate, setUserUpdate] = useState({
    firstName: "",
    lastName: "",
    email: "",
    dob: "",
    gender: "",
    address: {
      billing: {
        address1: "",
        address2: "",
        city: "",
        state: "",
        postalCode: "",
      },
      shipping: {
        address1: "",
        address2: "",
        city: "",
        state: "",
        postalCode: "",
      },
    },
  });

            <FormGroup widths="equal" id="billing">
              <FormField
                id="address1"
                control={Input}
                label="Address Line 1"
                placeholder="123 Main Street"
                defaultValue={
                  userUpdate.address.billing.address1
                    ? userUpdate.address.billing.address1
                    : user.address.billing.address1
                }
                onBlur={(e) => {
                  handleChange("b", e);
                }}
              />

handleChange -> b 是我需要更新的地址部分.. Billing 或 Shipping 等。


const handleChange = (section, e) => {
    const form = e.target.form.id;

    if (form === "user") {
      console.log(section);
      if (section === "b") {
        setUserUpdate({
          ...userUpdate,
          address: {
            billing: {
              [e.target.id]: e.target.value.trim(),
            },
          },
        });
      } else if (section === "s") {
        setUserUpdate({
          ...userUpdate,
          address: {
            shipping: {
              [e.target.id]: e.target.value.trim(),
            },
          },
        });
      } else {
        setUserUpdate({
          ...userUpdate,
          [e.target.id]: e.target.value.trim(),
        });
      }
    }

    if (form === "category") {
      setCategoryUpdate({
        ...categoryUpdate,
        [e.target.id]: e.target.value.trim(),
      });
    }
  };

控制台日志显示正确的 e.target.id => address1 和 e.target.value.trim() => 地址，但它没有更新状态..

现在我的代码在表单默认值上抛出错误

×
TypeError: Cannot read properties of undefined (reading 'address1')
GenerateActiveScreen
C:/Development/Picwrist Web Application/client/src/components/screens/user/Dashboard.js:397
  394 | control={Input}
  395 | label="Address Line 1"
  396 | placeholder="123 Main Street"
> 397 | defaultValue={
      | ^  398 |   userUpdate.address.shipping.address1
  399 |     ? userUpdate.address.shipping.address1
  400 |     : user.address.shipping.address1

【问题讨论】：

检查user.address.billing.address1的默认值
它调用设置用户记录的数据库。在对记录进行更改之前，该值是正确的。这会因更改现有值时发生的 onBlur 事件而失败。即 123 Hills Drive 在 DB 的字段中，但我将其更改为 122 Hills Drive 它失败
userUpdate 对象下的所有其他内容都可以正常更新，但只有地址部分会引发错误。
跟进.... 好的，看起来它覆盖了所有地址信息。假设您拥有所有地址信息，它没有通过更新携带现有信息，并且仅将 billing.address1 作为地址对象下的唯一项目。

标签： reactjs react-native semantic-ui

【解决方案1】：

更改了字段的 ID 并更新了 handleChange 状态以传递先前状态的现有值。

const handleChange = (section, e) => {
    const form = e.target.form.id;

    if (form === "user") {
      const id = e.target.id;
      const value = e.target.value.trim();

      if (section === "b") {
        setUserUpdate((userUpdate) => ({
          ...userUpdate,
          address: {
            ...userUpdate.address,
            billing: {
              ...userUpdate.address.billing,
              [id.slice(1)]: value,
            },
          },
        }));
      } else if (section === "s") {
        setUserUpdate((userUpdate) => ({
          ...userUpdate,
          address: {
            ...userUpdate.address,
            shipping: {
              ...userUpdate.address.shipping,
              [id.slice(1)]: value,
            },
          },
        }));
      } else {
        setUserUpdate({
          ...userUpdate,
          [e.target.id]: e.target.value.trim(),
        });
      }
    }

    if (form === "category") {
      setCategoryUpdate({
        ...categoryUpdate,
        [e.target.id]: e.target.value.trim(),
      });
    }
  };

【讨论】：