TypeError: Cannot read property 'map' of undefined react ant design table

Question

朋友们我很难找到解决这个问题的方法。我总是得到一个错误

无法读取未定义的 React Ant 设计 table 属性 'map'。即使当我尝试 console.log 我返回的对象时，也有一个数据不为空。但我收到一个错误。我猜这个错误导致我的道具是空的。

父容器从api获取数据:

<TabPane style={{ marginTop: 20 }} tab="My Settlements" key="1" >
  <MySettlements settlementprops={this.state.settlements} />
</TabPane>

组件处理来自 api

的对象

render() {
    const settlementprops = this.props.settlementprops;

    const tableData = settlementprops.map((obj) => ({
        campaign_name: obj.campaign_name
    }))

    const columns = [{
        title: 'Campaign Name',
        dataIndex: 'campaign_name',
        key: 'campaign_name',
      }
    ];

    var tableViewDom = [];
    tableViewDom.push(
            <Table
                className='my_campaigns_table'
                columns={columns} dataSource={tableData}
            > 
            </Table>
     )

Answer 1

改变

const settlementprops = this.props.settlementprops;

到

const settlementprops = this.props.settlementprops || []

Answer 2

您可能在 componentDidMount 中从 API 加载数据，它在第一次渲染后触发。无论你的变量是什么，只要像这样短路它：

this.state.myArray && this.state.myArray.map(...)

这样，如果 this.state.myArray 没有值，它就不会尝试映射它，这将解决您的问题。

TypeError: Cannot read property 'map' of undefined react ant design table

TypeError: Cannot read property 'map' of undefined react ant design table

reactjs

ant-design-pro