Возврат <Promise>от реакции

Question

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

[undefined, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise]

Что не так?

Вот мой код:

APP.JS

    const elements1 = await axios.get(axios.defaults.baseURL)
      // this works ok.

     const Allelements = await Promise.all(elements1.data.elements.map(element => { 

          if(element.type == 'CONTENT'){
            const contentType = responseElements.data.elements.map(element => element)
            this.setState({content : contentType})
          }
}))

ЗДЕСЬ Я ОТПРАВЛЯЮ ГОСУДАРСТВО на дом:

 <Route path="/" exact render={(props) => <Home {...props} content={this.state.content} />}/> // this send the data ok.

ДОМ получает ЭТО и передает его, и работает нормально:

<ContentGroupTall content={this.props.content}>

CONTENTGROUPTALL.JS -> ЗДЕСЬ проблема.

 componentDidUpdate(){

     const a = this.props.content // a have the data

    const b = a.map(element => element.content).filter(element => element != null)

    const c = b.map(element => { 
      if(element.type == 'RAIL'){
      return axios.get(`http://url:3000/${element.id}`)
      }
    })
    console.log('cccccccc', c) --> [undefined, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise, Promise]

Answer 1

Оберните ваш массив c с Promise.all.Затем вы можете продолжить выполнение разрешенных обещаний в операторе then после Promise.all, чтобы получить значения.

Answer 2

axios.get возвращает Обещание, поэтому вы сопоставляете массив с обещаниями, за исключением первого случая, когда element.type, вероятно, не равен RAIL.

Сначала вы можете отфильтровать их, затемразрешите его с помощью Promise.all:

Promise.all(
   b.filter(element => element.type === 'RAIL')
    .map(element => axios.get(`http://url:3000/${element.id}`))
)
.then(res => res.forEach(element => console.log(element)));

Вы также можете использовать деструктуризацию, чтобы избежать многословия:

Promise.all(
    b.filter(({type}) => type === 'RAIL')
     .map(({id}) => axios.get(`http://url:3000/${id}`))
)
.then(res => res.forEach(element => console.log(element)));