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

Posted 2023-02-16

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

我为此使用useEffect：

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

方法inputChangedHandler正在设置特定字段（公司，名称，描述）的表单值。这里的问题是仅最后一个字段被更改（在代码的情况下为描述）。如果我更改了行顺序，并且“名称”将是最后一个，则将显示名称信息，而不是描述。

我该如何解决？

答案

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

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


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