Question

我一直在将一个最初位于一个文件中的小型应用程序重构为它自己的单独组件。目前，我有一个子组件UsersTable，该子组件正在父Users2中渲染。我正在从父母那里将一些虚拟数据作为道具传递给孩子，但是却得到了可爱的Cannot read property 'map' of undefined。

我正在使用react钩子，并通过父级中的spread操作符传递道具：

<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>

我专门试图弄清楚为什么数据prop（对象数组）返回未定义的原因。链接我的沙盒here。我想知道问题是否可能与通过传播算子传递多个单独的道具有关。

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

Answer 1

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

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

例如，您需要写

<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

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组件将正常工作。

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

4 个答案: