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

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);
}

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

我该如何解决？

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 };
  });
};

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

Setting the state several times inside useEffect sets the last one only

reactjs

use-effect

use-state