Состояние React JS set работает только для предыдущего элемента

Question

Я новичок в React JS.

Я получил следующий код:

const [tags, setTags] = React.useState([]);

И есть несколько ярлыков. Если вы нажмете на ярлык, то произойдет следующее:

    const handleClick = (e) => {
      setTags([...tags, e]);
      console.log(tags)

"e" появляется как строка, которая является значением ярлыка

Но моя проблема с setTags, это не так. добавить текущую букву "e" в массив тегов. Строка журнала консоли будет пустой при первом выполнении handleClick.

Если я щелкну другую метку, то в журнале консоли будет напечатан массив, содержащий метку, по которой щелкнули ПРЕДЫДУЩИЙ щелчок, но не текущую. Я не понимаю такого поведения.

Answer 1

Обновления состояния в реакции асинхронны. Попробуйте это:

const [tags, setTags] = React.useState([]);

const handleClick = (e) => {
  setTags([...tags, e]);
}

useEffect(() => {
  console.log(tags);
});

Answer 2

Обновления состояния реакции асинхронны. Добавив хук useEffect с зависимостью от тегов, мне удалось получить то, что я хотел.