Ловушка состояния использования реакции не обновляется

Question

Я загружаю данные о начальной загрузке. Когда пользователь нажимает кнопку, чтобы добавить распознавание, вызов API добавляет его и возвращает. Я добавляю новое сообщение в массив, но новое обновление не отображается. Возвращаемый объект и массив объектов имеют одинаковый тип объекта. Когда я перезагружаю страницу, новое сообщение отображается, но не в функции добавления. Есть что-то, чего мне не хватает?

  const [recognitions, setRecognitions] = useState([]);

useEffect(() => {
    Api.GetRecognitions(params)
      .then(response => {
        const items = response || [];
        setRecognitions(recognitions => [...recognitions, ...items]);
      })
  }, [setRecognitions]);

const handleAddPost = () => {
    Api.AddRecognition(params)
    .then(response => {
      const newPost = response;
      setRecognitions(recognitions=> [...recognitions, newPost])
    });
  }

<Form.Group>
      <Form.Field>
        <Button basic color='blue' onClick={handleAddPost}>Add</Button>
      </Form.Field>
    </Form.Group>
    <Form.Group>
      <Form.Field>
      {recognitions.map(recognition => (
        <RecogWallPost 
          key={recognition.recogStagingId}
          recognition={recognition}
          participantId={participantId}
        />
      )
      )}
      </Form.Field>
    </Form.Group>

Answer 1

Вместо передачи [setRecognitions] в качестве второго аргумента useEffect, вы хотите передать [recognitions]. Это говорит хуку useEffect запускаться каждый раз, когда распознаются изменения, что он делает внутри handleAddPost.

Answer 2

Вы должны создать асинхронную функцию c, а затем использовать ее следующим образом:

useEffect(() => {
  async function initData() { 
    Api.GetRecognitions(params)
      .then(response => {
        const items = response || [];
        setRecognitions(recognitions => [...recognitions, ...items]);
      })
  }
  initData()
}, [setRecognitions]);