我一直在将一个最初位于一个文件中的小应用程序重构为它自己的独立组件。目前我有一个UsersTable在父组件中渲染的子组件Users2。我正在将一些来自父母的虚拟数据作为道具传递给孩子，但我得到了可爱的Cannot read property 'map' of undefined.
我正在使用反应钩子并通过父级中的扩展运算符传递道具：
<UsersTable {...columns} {...data} />
孩子在这里收到：
export const UsersTable = props => {
const [usersState, setUsersState] = useState(props)
useEffect(() => {
setUsersState(props)
}, [props])
const renderUsers = () => {
if (usersState) {
return usersState.map(d => items(d))
} else {
return noData
}
}
以及这里的返回函数：
<ActionList columns={usersState}>{renderUsers}</ActionList>
我特别想弄清楚为什么数据道具（一个对象数组）返回未定义。在这里链接我的沙箱。我想知道这个问题是否可能与通过传播运算符传递多个单独的道具有关。
任何关于我想要完成的工作的帮助或建议将不胜感激！
这不是传递道具的正确方法。
道具作为对象的属性传递，因此您需要为其定义名称和值。
例如，你需要写，
<UsersTable {...columns} {...data} />
作为
<UsersTable columns={columns} data = {data} />
现在 UserTable 组件将获得这个 props 对象，
props = {
columns=the column data,
data = the data
}
要使用这个道具，你可以使用解构
const {data, columns} = props;
或者你可以使用点符号，props.column&props.data
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句