Как передать реквизит от родителя к ребенку в React?

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

А также внизу в функции возврата здесь:

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

Я специально пытаюсь выяснить, почему данные prop (массив объектов) возвращает undefined. Связываю свою песочницу здесь . Мне интересно, связана ли проблема с передачей нескольких отдельных свойств через операторы распространения.

Любая помощь или совет относительно того, что я пытаюсь выполнить sh, были бы очень признательны!

Answer 1

В компоненте 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 будет работать нормально.

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

Это неправильный способ передачи свойств.

Свойства передаются как свойства объекта, и, следовательно, вам необходимо определить его имя и значение.

Например, вы нужно написать

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

как

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

Теперь компонент UserTable получит этот объект props,

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

Чтобы использовать этот props, вы можете использовать деструктуризация

const {data, columns} = props;

или вы можете использовать точечную нотацию, props.column & props.data