在 React 中设置状态值

Question

下午好，

我在通过 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 是我需要更新的地址部分。账单或送货等


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

Answer 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(),
      });
    }
  };

在 React 中设置状态值

Setting Values for State in React

reactjs

react-native

semantic-ui