обновить состояние реакции с использованием предыдущих данных

Question

Это следующий вопрос к этому вопросу:

Почему вызов метода response setState не изменяет состояние немедленно?

Я получил компонент 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

Решение здесь простое: вы можете сохранить formValues ​​в объекте, прежде чем использовать его в setItemsList

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