arrays - 为什么将数组作为道具传递时会转换为对象?
问题描述
我正在尝试将每个数组项映射到它自己的 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) [empty × 9] "
"true"
但是,Board.js 中的控制台会登录 yield:
//(一个对象)
"{squares: Array(9)}"
"false"
我很好奇为什么会发生这种情况。另外,如果有办法,我怎样才能让我的组件将道具识别为数组?
解决方案
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
推荐阅读
- javascript - 模态打开html时自动播放视频
- javascript - 使用“of(false)”时不推荐使用“subscribe()”
- python - 如何使用for循环许多变量?
- php - 无法使用 php Mac (Xampp) 打开 .txt 文件
- sql - DDL:多列上的 SQL 问题检查约束
- python - 如何在不引发导入错误的情况下使用 MIDIUtil 库?
- javascript - JavaScript for 循环不检查数组并在指定的 html 元素中显示消息
- debugging - 装配调试问题
- mongodb - MongoDB:使用更新方法添加数组的新元素不起作用
- javascript - “返回错误;” 当函数存在时被忽略,即使函数为空