Question

这是该问题的后续问题：

Why calling react setState method doesn't mutate the state immediately?

我得到了一个带有表单的React组件，该表单可用于添加项目或编辑当前项目。表单连同其所有值一起被保存为组件的状态。

提交表单时，我正在这样做：

const onSubmitForm = () =>
{
      if(editedItem) //the item to edit
      {
        EditSelectedItem();
        setEditedItem(undefined);
      }
      else
      {
        //handle new item addition
      }
      clearFormValues();
      setEditedItem(undefined);
  }

编辑方法：

const EditSelectedItem = () => 
{
    setItemsList(prevItemsList => 
      {
        return prevItemsList.map(item=> 
          {
            if(item.id !== editedItem.id)
            {
              return item;
            }
            item.name = formSettings["name"].value ?? "";
            item.description = formSettings["description"].value ?? "";
            item.modified = getNowDate();
            return item;
          });
      })
  }

问题在于，由于setItemsList未被同步调用，因此之前在提交表单方法中的clearFormValues();被调用，而我丢失了表单的旧值（在formSettings中）..

调用formSettings时如何保留setItemsList的旧值？

Answer 1

这里的解决方案很简单，您可以在使用setValuesList之前将formValues存储在对象中

const EditSelectedItem = () => 
{

    const values = {
      name: formSettings["name"].value ?? "";      
      description: formSettings["description"].value ?? "";
      modified: getNowDate();
   }
    setItemsList(prevItemsList => 
      {
        return prevItemsList.map(item=> 
          {
            if(item.id !== editedItem.id)
            {
              return item;
            }

            return {...item, ...values};
          });
      })
  }

使用先前的数据更新反应状态

1 个答案: