在 useEffect 中多次设置 state 只设置最后一个

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

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

function inputChangedHandler({companyName,name, description}){
  setName(name);
  setCompanyName(companyName);
  ...

}
 useEffect(() => {
    if(props.editedItem)
    {
        inputChangedHandler(...props.editedItem);
    }
  }, [props.editedItem])

Answer 2

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

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

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

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

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

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