Выполнение вызова Axios в функции forEach для изменения объекта не распознается при рендеринге, несмотря на то, что он находится в состоянии

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

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

Прямо сейчас консоль регистрирует массив, который получает компонент, и все данные присутствуют, однако каждое поле может быть отображено, кроме того, которое добавляется в цикле forEach.

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

// The API call

loadUserAndTrailers = () => {
        let trailers = []; 
        axios.get("http://localhost:5000/api/trailers")
        .then (res => {
            trailers = res.data;
        })
        .then (() => {          
            trailers.forEach(trailer => {

 axios.get(`http://localhost:5000/api/votes/user/${this.state.user.id}/${trailer.TrailerID}`)
                .then (res => {
                    const vote = res.data[0].Vote;
                    trailer.vote = vote;
                })
            })
        })
        .then (() => {
            this.setState({trailers: trailers});
        })
}

// The child component

const TrailerList = props => {

    console.info(props)

    const trailers = props.trailers.map(trailer => {
        return <div>{trailer.vote}</div>
    });

    return <div>{trailers}</div>;
};

// The return in the parent component

return (
  <div className = "container">
    <div className = "content">
      <h1>Trailers</h1>
      <div className = "trailers">
      <TrailerList trailers = {this.state.trailers}></TrailerList>
    </div>
  </div>
</div>
);

console.info(props) показывает мне завершенный массив с массивом объектов с этим существующим значением ключа {vote: 1}, но ничего не отображает. Как это может быть? Я уже два дня бьюсь головой о стену, но, по общему признанию, я новичок в API и промисах. У меня сложилось впечатление, что обещание должно убедиться, что вызов завершен, прежде чем переходить к следующему шагу, и мое правильно зарегистрированное состояние, похоже, подразумевает, что этот аспект кода работает должным образом.