返回 <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.

HOME接收IT並通過它，並且工作正常：

<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

axios.get返回一個Promise，所以你將數組映射到promises，除了第一種情況，當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)));

Answer 2

用Promise.all包裝你的c數組。 然后，您可以在Promise.all之后的then語句中繼續解析的promises以獲取值。