无法在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

提供对未定义的检查prop.data，然后渲染该组件，因为道具最初可能不提供数据，但在第二个渲染中可用。那应该解决你的问题

class App extends React.Component {

  render() {

    var data = [

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

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

]

    return (

        <div ><TransactionManagerView data={data}/></div>

    )

  }



}







const TransactionManagerView = function(props) {



  console.log(props.data);



  return (

    <ul>

      {

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

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

        })

      }

    </ul>

  )



}



ReactDOM.render(<App/>, document.getElementById('app'));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>

<div id="app"></div>