Я пытаюсь сопоставить каждый элемент массива с его собственным 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 дают:

// (объект)

"{squares: Array (9)}"
"false"

Мне любопытно, почему это происходит. Кроме того, если есть способ, как я могу заставить свой компонент распознавать реквизиты как массив?

1
Jacob Crocker 14 Апр 2019 в 02:27

2 ответа

Лучший ответ

Параметр squares в дочернем компоненте Board является объектом поддержки. Если вы попробуете 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
reflexgravity 13 Апр 2019 в 23:30

То, что получает компонент Board, является объектом props, и в вашем случае одним из его свойств будет squares. Итак, ваш Board код должен быть:

function Board(props) {

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

    return (
        null
    )

}

export default Board
2
f-CJ 13 Апр 2019 в 23:33