Question

我得到了一个组件，该组件具有添加新项目的表单，并且它还应该更新现有项目。我正在尝试设置表单字段的值，这样，如果用户选择编辑项目，则他将已经有需要编辑的表单中已有项目的所有数据。

我为此使用useEffect：

useEffect(() => {
    if(props.editedItem)
    {
        inputChangedHandler(props.editedItem.companyName, "company");
        inputChangedHandler(props.editedItem.name, "name");
        inputChangedHandler(props.editedItem.description, "description");
    }
  }, [props.editedItem])

方法inputChangedHandler设置特定字段（公司，名称，描述）的表单值：

const inputChangedHandler = (newVal, inputIdentifier) => 
{
    const updatedOrderForm = {
        ...formSettings
    };
    const updatedFormElement = { 
        ...updatedOrderForm[inputIdentifier]
    };
    updatedFormElement.value = newVal;
    updatedOrderForm[inputIdentifier] = updatedFormElement;
    setFormSettings(updatedOrderForm);
}

这里的问题是仅最后一个字段被更改（在代码情况下为描述）。如果我更改了行顺序，并且“名称”将是最后一个，则将显示名称信息，而不是描述。

我该如何解决？

Answer 1

不确定onClick方法的定义如何，但是您可以获取该值并使用相应的钩子对其进行设置。

inputChangedHandler

Answer 2

您可能会使用已过期的值（由于closures）覆盖您的表单。

// closure on `updatedOrderForm` value, staled state
const updatedFormElement = { 
   ...updatedOrderForm[inputIdentifier]
};

尝试使用提供{strong>最新状态的functional update。

const inputChangedHandler = (newVal, inputIdentifier) => {
  setFormSettings((prev) => {
    const updatedOrderForm = {
      ...formSettings,
    };

    const updatedFormElement = {
      ...updatedOrderForm[inputIdentifier],
      value: newVal,
    };

    return { ...prev, [inputIdentifier]: updatedFormElement };
  });
};

在useEffect内多次设置状态仅设置最后一个

2 个答案: