为什么数组在作为道具传递时被转换为对象？
为什么数组在作为道具传递时被转换为对象？
提问于 2019-04-13 23:27:46
我试图将每个数组项映射到它自己的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 BoardApp.js中的控制台日志按预期工作，结果如下：
//(数组)“(9)空×9”“真”
但是，控制台记录在Board.js产量中：
//(对象)“{正方形:数组(9)}”“false”
我很好奇为什么会发生这种事。另外，如果有一种方法，我如何才能让我的组件将道具识别为数组？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-13 23:30:58
子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 BoardStack Overflow用户
发布于 2019-04-13 23:33:06
Board组件接收的是props对象，在您的示例中，它的一个属性将是squares。因此，您的Board代码应该是：
function Board(props) {
console.log(props.squares)
console.log(Array.isArray(props.squares))
return (
null
)
}
export default Board页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55670733
复制相关文章
相似问题
腾讯云开发者
