Question

我试图将每个数组项映射到它自己的div（以创建一个TicTacToe板）。但是，当我从道具传入它时，它被视为一个对象。这是一个示例：

这是我的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）[empty×9]“
“ true”

但是，控制台登录到Board.js的结果是：

//（一个对象）

“ {squares：Array（9）}”
“ false”

我很好奇为什么会这样。另外，如果有办法，我如何让我的组件将props识别为数组？

Answer 1

子squares组件中的Board参数是一个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

Answer 2

Board组件收到的是props对象，在您的情况下，其属性之一将是squares。因此，您的Board代码应为：

function Board(props) {

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

    return (
        null
    )

}

export default Board

将数组作为道具传递时，为什么将其转换为对象？

2 个答案: