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

Question

这是这个问题的后续问题：

我得到了一个带有表单的 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)..

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

Answer 1

这里的解决方案很简单，您可以在使用 setItemsList

之前将 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};
          });
      })
  }

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

update react state using previous data

reactjs

react-state

use-state