Question

我正在将数据传递给演示文稿（无状态）类，传递了数据，并且我可以打印传递给它的价格数组，但是当我尝试映射该数组时，我得到一个错误（“无法读取属性'map'的'）

const CoinCharts = ({prices}) => (
      <div className='section'>
        // this console.log get an array printed
    {console.log( ( prices.Data ) )}


    {prices.Data.map( (price) => 
     <div> something here </div>
    )}
)

index.js刚刚像这样传递了数据

 <div className='column'> <CoinCharts prices={this.state.prices} /> </div>

数据通过ok，但可以正常打印

Answer 1

之所以发生这种情况，是因为在第一个渲染中price.Data中没有任何内容。您正在使用Axios的承诺来获取数据。因此，您必须检查数据是否实际存在，否则将收到此错误。您可以通过多种方式来做到这一点，但是其中之一是：

const CoinCharts = ({prices}) => (
      <div className='section'>
        // this console.log get an array printed
    {console.log( ( prices.Data ) )}


     { prices.Data ? prices.Data.map( (price, key) =>
      <div key={key} >Something here</div> 
     ) : null }
)

Answer 2

我建议您更改此行：

prices: response.data

对此

prices: response.data.Data

应该完成的工作。

在实际在传递的数据中打印数组后无法映射数组

2 个答案: