如何在反应中将道具从父母传递给孩子？

Question

我一直在将一个最初位于一个文件中的小型应用程序重构为它自己的独立组件。 目前我有一个子组件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
    }
  }

以及在此处返回 function ：

<ActionList columns={usersState}>{renderUsers}</ActionList>

我特别想弄清楚为什么数据道具（对象数组）返回未定义。 在这里链接我的沙箱。 我想知道这个问题是否可能与通过传播运算符传递多个单独的道具有关。

任何有关我要完成的工作的帮助或建议将不胜感激！

Answer 1

这不是传递道具的正确方法。

道具作为 object 的属性传递，因此您需要为其定义名称和值。

例如，你需要写，

<UsersTable {...columns} {...data} /> 

作为

<UsersTable columns={columns} data = {data} />

现在 UserTable 组件会得到这个 props object，

props = { 
columns=the column data,
data = the data
}

要使用这个道具，你可以使用解构

const {data, columns} = props;

或者你可以使用点符号props.column & props.data

Answer 2

你需要通过属性

 <UsersTable columns={...columns} data={...data} /> /*<-- Changes */ 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>

Answer 3

父组件：

<UsersTable columns={columns} data={data} />

有关如何以类似方式使用钩子和道具的示例，请参阅我的 github：

https://github.com/RyanJMorris11/helloReactHooks/blob/master/src/components/userList.js

Answer 4

在User2组件中，导入 UsersTable 组件需要更改：

<UsersTable {...columns} {...data} />

对此：

<UsersTable columns={columns} data={data} />

在UserTable组件中，您需要更改：

const [usersState, setUsersState] = useState(props)

至：

const [columns, setColumns] = useState(props.columns)
const [users, setUsers] = useState(props.data)

renderUsers将是：

  const renderUsers = () => {
    if (users) {
      return users.map(d => items(d))
    } else {
      return noData()
    }
  }

最后，像这样导入ActionList组件：

<ActionList columns={columns}>{renderUsers()}</ActionList>

之后， UsersTable组件将正常工作。