为什么在将数组作为道具传递时会将数组转换为对象?

问题描述 投票:1回答:2

我正在尝试将每个数组项映射到它自己的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)[空×9]” “真正”

但是,控制台登录Board.js会产生:

//(一个东西) “{square:Array(9)}” “假”

我很好奇为什么会这样。此外,如果有办法,我怎样才能让我的组件将道具识别为数组?

arrays reactjs object react-props
2个回答
2
投票

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

2
投票

Board组件接收的是props对象,在您的情况下,其中一个属性将是squares。所以你的Board代码应该是:

function Board(props) {

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

    return (
        null
    )

}

export default Board
热门问题
推荐问题
最新问题