如何从功能组件访问 class 组件中的数组？

Question

我尝试使用 fetch 中的数组来渲染几张卡片。 我有一个 MyCard 组件，它需要来自加载在 class 组件中的数组的信息。 但是我如何访问这个数组？

 class Customer extends Component {
 constructor() {
    super();
    this.state = {
      customers : []
    };

  componentDidMount() {

  fetch(.....etc ...etc..({ customers: json}))

 }


render () {
    return (   
    <div>
    <CustomerGrid/> 
    </div> ) 
  }   
  }
 export default Customer;

这里是功能组件 CustomerGrid，我需要使用来自 Customer class 的数组。 现在我正在考虑面向 object。 如何从我的 function 访问 class 中的阵列？

  import React from 'react';
  import Grid from '@material-ui/core/Grid';
  import CustomerCard from '../CustomerCard/CustomerCard';
  import Customer from '../Customer/Customer';
  const CustomerGrid = () => (
    <div>
    <Grid container>
    <Grid item xs={4}>
      {this.state.Customer.customers.map(card => (
      <div className="cards">
        <CustomerCard title={card.CustomerName} custType= {card.CustomerType}></CustomerCard>
      </div>
    ))}
    </Grid>
  </Grid>
  </div>
);

export default CustomerGrid;

Answer 1

您是否尝试将其作为道具传递？ 例如： <CustomerGrid customers={this.state.customers} />