无法读取 React 中未定义的属性“地图”

IT技术 reactjs
2021-04-17 00:28:51

我有从容器组件调用的以下组件。容器组件传递事务属性。

我知道 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>
  )

}
2个回答

提供对 undefined 的检查prop.data，然后渲染组件，因为props最初可能不提供数据，但在第二次渲染中可用。那应该可以解决您的问题

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>

这是因为组件的渲染发生在组件接收数组之前。作为一个选项，您可以设置props的默认值

import React from 'react';


export default function TransactionManagerView ({data = [], ...props}) {

  console.log(props.data);

  return (
    <ul>
      {
        data.map(function(el,index) {
           return <li key={index}>{el.category}</li>
        })
      }
    </ul>
  )

}
其它你可能感兴趣的问题
上一篇react-router更改网址但不查看 下一篇在 React.js 表单组件中使用 state 或 refs？