Javascript 反应：在传递多个状态时遇到问题。

我是一个相当新的角色，试图将状态传递给子组件。简而言之，我有一个包装器组件，其中包含一个子组件，该子组件显示一个表。一旦我将数据存储在数组中，我将其传递给子级，然后子级显示

在父级中，我传递如下数组：

 <CustomComponent data={this.state.arrayOne}/>

问题是我需要将多个数组传递给子对象。因此，如果我的状态对象看起来像：

this.state = {
  arrayOne: [],
  arrayTwo: [],
  arrayThree: [],
}

---

我怎样才能同时通过这三个呢？创建并创建这些数组的数组，如果是，我将如何访问它们。这个.props.data[0]？

您完全可以将多个props传递到一个组件中

对于代码清洁度，我将使其更加简单易读：

render() {
  const { arrayOne, arrayTwo, arrayThree } = this.state;
  return (
    <CustomComponent
      arrayOne={arrayOne}
      arrayTwo={arrayOne}
      arrayThree={arrayThree}
    />
  );
};

render（）{
const{arrayOne，arrayTwo，arraytree}=this.state；
返回(
);
};

---

如果您真的希望将其全部作为

this.props.data

传递：

用于将所有元素组合在一起的一个大型数组

或

---

如果您想调用

this.props.data[i]

单独访问每个阵列，但只从一个prop访问。

有许多方法可以实现您的要求。我个人会像这样把它作为一个对象来传递

//分解要传递的元素
const{arrayOne，arrayTwo，arraytree}=this.state；
//使用属性速记语法将数据属性作为对象文本传递

并使用

this.props.data.arrayOne.map（single=>single）；
this.props.data.arrayTwo.map（single=>single）；
this.props.data.arrayThree.map（single=>single）；

这种方法通常意味着您将太多的东西传递给了

，这会导致单个大型组件不能很好地重用

根据您的用例，您可能希望创建“子组件”，将这些阵列中的每一个呈现为一个表：

<CustomContainer>
  <CustomTable data={this.state.arrayOne} />
  <CustomTable data={this.state.arrayTwo} />
  <CustomTable data={this.state.arrayThree} />
</CustomContainer>

Ohh我真不敢相信我没想到会这么做，它按需要工作。我想知道什么是最佳实践？是的，所以在本例中，我得到数据来填充父对象中的子对象。然后，我拉出不同的数据来填充下拉列表。所以是整体数据，然后是下拉数据，否则我会按照你说的做。

<CustomContainer>
  <CustomTable data={this.state.arrayOne} />
  <CustomTable data={this.state.arrayTwo} />
  <CustomTable data={this.state.arrayThree} />
</CustomContainer>