时间戳

首页 > 解决方案 > 如何在道具（reactjs）中发送数组？

reactjs - 如何在道具（reactjs）中发送数组？

问题描述

我是新手，我需要通过数组将数组传递给另一个component，props但我遇到了一个问题

在组件 1 

this.state={
   data:[], //some values inside both it
   col:[]
    }

<Component2 data={[...this.state.data]} col={[...this.state.col]}/>

在组件 2 中

constructor(props){
    super(props)

    this.state = {
        data:[...this.props.data],
        col:[...this.props.col],

    }
    console.log(this.state.data+' inside state')
}

当我console.log得到以下输出时

[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象], [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object] 内部状态

我的数组之一有 17 个元素，但为什么没有得到实际数据？我的代码中是否有任何语法错误？

标签： reactjs

解决方案

在您的两个组件中，您不应该使用提取/解构语法。相反，只需按原样分配值。

例子：

组件 1

this.state={
   data:[], //some values inside both it
   col:[]
}

<Component2 data={this.state.data} col={this.state.col}/>

组件 2

constructor(props){
    super(props)

    this.state = {
        data: this.props.data,
        col: this.props.col,

    }
    // Also you were casting to a string here, just pass the data as second parameter to log it.
    console.log('inside state', this.state.data)
}

推荐阅读