为什么将数组作为道具传递时会转换为对象？答案

【问题标题】：Why does an array get converted to an object when passing it as props?为什么将数组作为道具传递时会转换为对象？
【发布时间】：2019-04-13 23:27:46
【问题描述】：

我正在尝试将每个数组项映射到它自己的 div（以创建井字游戏板）。但是，当我从道具传递它时，它被识别为一个对象。这是一个例子：

这是我的 App.js 文件：

class App extends Component {
  state = {
    gameBoard: Array(9),
  }

  render() {

    console.log(this.state.gameBoard)
    console.log(Array.isArray(this.state.gameBoard))

    return (
      <div className="App">
        <Board squares={this.state.gameBoard}/>
      </div>
    );
  }
}

export default App;

这是我的 Board.js 组件文件：

function Board(squares) {

    console.log(squares)
    console.log(Array.isArray(squares))

    return (
        null
    )

}

export default Board

App.js 中的控制台日志按预期工作：

//（一个数组）

“ (9) [空 × 9]”
“真”

但是，控制台登录 Board.js 的产量：

//（一个对象）

“{squares: Array(9)}”
“假”

我很好奇为什么会发生这种情况。另外，如果有办法，我怎样才能让我的组件将道具识别为数组？

【问题讨论】：

标签： arrays reactjs object react-props

【解决方案1】：

子Board 组件中的squares 参数是一个prop 对象。如果你尝试squares.squares 应该返回一个Array

function Board(squares) {
    // This is the prop object that react passes to a child component.
    console.log(squares);
    console.log(squares.squares)
    console.log(Array.isArray(squares.squares))

    return (
        null
    )

}

export default Board

【讨论】：

我明白了！ 'props' 是一个对象，其中包含传递给组件的任何内容，而 squares 则传递给组件。所以我真的应该将 Board.js 组件中的参数从“squares”更改为“props”以使其更清晰。然后我可以记录 props.squares 来访问数组。这更有意义。感谢您的帮助！

【解决方案2】：

Board 组件接收的是props 对象，在您的情况下，它的属性之一将是squares。所以你的Board 代码应该是：

function Board(props) {

    console.log(props.squares)
    console.log(Array.isArray(props.squares))

    return (
        null
    )

}

export default Board

【讨论】：