如何從功能組件訪問 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} />