как обработчик onChange получает доступ к предыдущему состоянию переменных?

Question

я где-то нашел следующий пример, и я не могу понять, как он должен работать, может кто-нибудь объяснить это, пожалуйста, я понимаю использование setState и инициализирую его, но я не понимаю переменную prevInputData! что вызывает setInputData и как предыдущее состояние передается в качестве параметра при вызове setInputData, я так запутался!

    //state stuff 
    const [inputData, setInputData] = useState({firstName: "", lastName: ""})

    //onChange handler 
    function handleChange(event) {
      const {name, value} = event.target

      setInputData(prevInputData => { //HOW THIS IS SUPPOSED TO WORK?
        return {
            ...prevInputData,
            [name]: value
          }
       });
    }

    //form input 
    <input name="lastName" 
           value={inputData.lastName}
           onChange={handleChange}
    />

Answer 1

Это своего рода заблуждение. Это не на самом деле значение состояния из предыдущего цикла рендеринга, это текущее значение состояния, передаваемое в качестве аргумента обратному вызову обновления функционального состояния . К тому времени, когда обратный вызов вызывается, хотя, во время сверки, чтобы обновить состояние, это сейчас состояние из последнего цикла рендеринга и возвращает следующее значение состояния.

Функциональный Обновления

setInputData(prevInputData => { // actually current state when queued
  return {
    ...prevInputData,
    [name]: value
  }
});

Answer 2

Входные данные были установлены в какой-то момент, верно? Как, скажем, при первом запуске значения устанавливаются равными firstname:"jhon" и lastname:"doe", теперь при следующем запуске setState у него уже будет ссылка на предыдущее значение, поскольку оно было установлено ранее.

 setInputData(prevInputData => { //Get the previous values which were set
        return {
            ...prevInputData, //uses spread operator to add those values here so that they are not lost
            [name]: value //setting new values.
          }
       });

Другими словами, если вы не используете prevInputData, который является просто именем переменной, это может быть что угодно, ваши предыдущие изменения будут отменены. Кроме того, под прогоном я подразумеваю текущее состояние, которое он поддерживает, не то чтобы вы могли вернуться после refre sh, и оно будет там. это похоже на обновление для полей ввода, с каждым оставленным полем ввода состояние обновляется и сохраняет предыдущие значения полей ввода, которые вы добавили; если вы не выполните ...prevData, тогда предыдущие введенные значения будут потеряны.