Когда обновлять состояние на основе предыдущего состояния в useState в React/Typescript

#javascript #reactjs #use-state

Вопрос:

Я видел несколько примеров того, как обновлять состояние на основе предыдущего состояния, но я не вижу много объяснений о том, когда обновлять состояние на основе предыдущего состояния, в большинстве примеров используется встречный пример, но что, если бы я устанавливал объект в состояние, это все равно было бы основано на предыдущем значении или я могу просто обновить состояние. например

 const exampleData = [
    {
       text: 'Example name',
       value: 1
    },
    {
       text: 'Example name 2',
       value: 2
    }
]

  const [asset, setAsset] = useState(exampleData[0]);

  const handleClick = (event) => {
      setAsset(event.target.value) 
  }

Итак, в примере я обновляю состояние в функции handleClick, но нужно ли мне обновлять его на основе предыдущего значения или нет?

1. Это value: 3 случайный выбор или он продиктован тем, что в настоящее время находится в штате? Тот же вопрос для текста, хотя это, по-видимому, менее вероятно, связано с текущим состоянием.

2. Итак, это структура данных exampleData , но это пример

3. Я спрашиваю о том, как рассчитывается новое состояние ( {text: 'update name', value: 3} ). Является ли новое состояние не связанным с предыдущим состоянием? Или вам нужно использовать что-то из предыдущего состояния для вычисления нового состояния?

4. Я обновил вопрос, функция handleClick установит состояние на основе значения события.цель

5. Напишите любой код, который вы имеете в виду для вызова setAsset . Если это не принесет никакой пользы asset , все в порядке. Использование exampleData -это нормально.

Ответ №1:

Если вы хотите получить доступ previous state , доступный в setState действии

 const [state, setState] = useState(false);

const handleClick = () => {
    setState(prev => !prev); // true
    setState(prev => !prev); // false
}

Обратите внимание: setState является async ли действие