如何更新我的React组件中某个字段的字段？

Question

我正在尝试编写事件处理程序以更新组件中字段的字段。我的组件具有以下属性...


    deliveryConfirmationImage: null
    
    deliveryLocation: {address: "639 N Westmoreland Ave, Los Angeles, CA 90004, 
    
    pickUpWindow: {startTime: "2020-05-17T18:58:28.829545", timeWindowType: "whenever possible"}
    

注意，pickUpWindow本身是一个具有自己属性的对象。我的同伴中有这个...

  const { handleChange, values } = useForm(mission);
...
  function handleChangePickupWindow(data) {
    const { time } = data;
    const name = "pickUpWindow";
    const value = {startTime: time};
    handleChange({ target: { name, value } });
  }

...
                <DateTimeInput
                  dateInputProps={{
                  id: "date-pickup",
                  label: "Pickup Date",
                }}
                onChange={handleChangePickupWindow}
                required
                timeInputProps={{
                  id: "time-pickup",
                  label: "Pickup Time",
                }}
                value={values.pickUpWindow.startTime}
              />

我在其中定义“ handleChange”钩子，就像这样...

  const handleChange = ({ target }) => {
    setValues((values) => ({
      ...values,
      [target.name]: target.value,
    }));
  };

[但是可悲的是，尽管我看到传递给句柄更改事件处理程序的时间的正确值，但我不知道如何更新“值”对象中的适当项目以正确地更新组件-即“值”。即使我尝试更改它，pickUpWindow.startTime”也始终保持相同的值。我还需要做些什么来更新我的基础字段？

Answer 1

看起来好像您是在上下文中写括号，即使它正在工作，您也会遇到一个额外的（大）问题...当试图用另一个对象更新一个对象中的值时，您将覆盖整个对象。 更新startTime将使您更新整个pickUpWindow嵌套对象，就您使用useState而言：

让我告诉你...您的对象：

  const obj = {
    deliveryConfirmationImage: null,
    deliveryLocation: {
      address: "639 N Westmoreland Ave, Los Angeles, CA 900004",
      pickUpWindow: {
        startTime: "2020-05-17T18:58:28.829545",
        timeWindowType: "whenever possible"
      }
    }
  }

并且如果您尝试在单独的文件上尝试：

  obj = { ...obj, pickUpWindow: {} };
  console.log(obj);

糟糕，您有一个额外的pickUpWindow嵌套对象，但是它没有更新实际的pickUpWindow。我建议您简化该结构并稍后再构建该对象（例如在onSubmit之前），因为您的代码将无法按预期工作。