无法在React中读取未定义的属性'map'

Question

我有以下从容器组件中调用的组件。容器组件通过交易道具。

我知道prop中的data属性可以很好地传递并且具有数据，可以从console.log调用中进行访问。但是，当我尝试映射数据并创建列表时，出现错误：Cannot read property 'map' of undefined

数据如下所示：

[

{"transid":3426,"acct":"acct1","category":"Auto"},

 {"transid":3427,"acct":"acct2","category":"Subscriptions"}

]

我究竟做错了什么？

import React from 'react';

export default function TransactionManagerView (props) {

  console.log(props.data);

  return (

    <ul>

      {

        props.data.map(function(el,index) {

           return <li key={index}>{el.category}</li>

        })

      }

    </ul>

  )

}

Answer 1

这是因为组件的呈现发生在组件接收数组之前。作为选项，您可以设置道具的默认值import React from 'react';export default function TransactionManagerView ({data = [], ...props}) {&nbsp; console.log(props.data);&nbsp; return (&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; data.map(function(el,index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return <li key={index}>{el.category}</li>&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </ul>&nbsp; )}