API неправильно выбирает данные пользователя при сопоставлении и получении сведений о пользователе по каждому идентификатору пользователя

Question

У меня есть массив объектов с каждым элементом, имеющим идентификатор пользователя, который создал конкретный элемент.Теперь в React я сопоставляю массив, чтобы показать детали.Перед отображением я вызываю API через «axios.get», который берет идентификатор пользователя и возвращает информацию о пользователе.Проблема в том, что пользовательские данные, возвращаемые из API, загружены неправильно.

API полностью в порядке, но есть некоторая проблема в интерфейсе React.Есть ли лучший способ сделать это?

Где я отображаю фид:

Метод вызова API и полученияпользовательские детали.posts_by - глобальная переменная.

Answer 1

Похоже, вы не используете реализацию ReactJs должным образом.

1. Reactjs работает над повторным рендерингом всякий раз, когда обновляется любое состояние или реквизит.getUserById - это асинхронный вызов, и поэтому, когда API завершит выборку данных, пользовательский интерфейс уже будет обработан.А поскольку хранилище избыточных данных или состояние реакции не обновляется новыми данными из API, пользовательский интерфейс не будет повторно отображаться с новыми данными.Итак, вам нужно обновить ваше состояние / хранилище с данными из API после завершения вызова API.Updating the value of global variable(by posted_by = res.data) won't work in here.

2. Вызовы API не должны выполняться внутри функции рендеринга.В противном случае, каждый раз, когда реакция будет повторно отображать пользовательский интерфейс, вы будете делать те же вызовы API.Вы должны перенести их на другие методы жизненного цикла.

Надеюсь, это поможет.Возврат для любых сомнений / разъяснений.