Как передать реквизиты субкомпоненту в Reactjs - PullRequest
Новая
       10

Как передать реквизиты субкомпоненту в Reactjs

0 голосов
/ 27 сентября 2019

Я пытаюсь передать реквизиты от родительской компонентной функции ребенку в React без какой-либо удачи.Я использую React Data Table Component , фильтрующий функциональность .Документация с примерами в Storybook великолепна, однако я хочу изменить поле поиска на список тегов, который при нажатии будет точно так же фильтровать таблицу данных.

Данные, которые я пытаюсь разобрать в отдельные «теги», структурированы следующим образом: 

  [{"id":"09090","first_name":"Cynthia","last_name":"McDonald","email":"email1@gmail.com","profile_url":"https:myprofile.com/1","types":["professor","science"]},
{"id":"03030","first_name":"Ryan","last_name":"Burke","email":"email2@gmail.com","profile_url":"https://myprofile.com/2","types":["student","science"]},
{"id":"05050","first_name":"Stewart","last_name":"Hook","email":"email3@gmail.com","profile_url":"https://myprofile.com/3","types":["professor","math"]}]

Я пытаюсь создать уникальный список тегов изАтрибут «types», который действует как фильтр onClick вместо onChange, как и в оригинальном примере текстового поля поиска.Таким образом, на основе выборочных данных мы получим теги для профессора, науки, студента и математики.

Если вы посмотрите на код в Storybook, более конкретно, строку 45: 

const subHeaderComponentMemo = React.useMemo(() => 
<Filter onFilter={value => setFilterText(value)} />, []);

Мои данные загружаются через вызов API, и я пытаюсь передать эти данные в subHeaderComponentMemo с помощьюprops, т. е. 

const subHeaderComponentMemo = React.useMemo(() => 
<Filter data={people} onFilter={value => setFilterText(value)} />, []);

Затем я пытаюсь получить и просмотреть эти данные в строке 20 и заменяю большую часть этого кода, чтобы он отображал уникальные теги из атрибута types данных.

Код сборника рассказов: 

const Filter = ({ onFilter }) => (  
<TextField id="search" type="search" role="search" placeholder="Search Title" onChange={e => onFilter(e.target.value)} />
);

Мой ошибочный код 

const Filter = ({props, onFilter }) => {
  // Get a unique array of types
  const types = [...new Set(props.types.map(type => type))];

  return types.map(type => (
    <span
      className="badge badge-primary"
      onClick={() => onFilter({ type })}
      onKeyDown={() => onFilter({ type })}
      tabIndex="0"
      role="button"
    >
      {type}
    </span>
  ));
};

Это, конечно, приводит к эпическойпровал.Модуль даже не отображается.

Я новичок в React, поэтому любая оценка / помощь будет принята с благодарностью.

Обновленный код, основанный на отзывах 

const Filter = ({ data, onFilter }) => {
  console.dir(data);
  if (data.length === 0) {
    return <div>No data</div>;
  }

  const types = [...new Set(data.types.map(type => type))];

  return (
    <>
      {types.map(type => (
        <span
          className="badge badge-primary"
          onClick={() => onFilter({ type })}
          onKeyDown={() => onFilter({ type })}
          tabIndex="0"
          role="button"
        >
          {type}
        </span>
      ))}
      ;
    </>
  );
};

Одна из ошибок, которые я получил, когда внес изменения, была «невозможно прочитать свойство карты» undefined », чтоЯ приравнен к тому факту, что этот компонент может быть рендеринг до того, как данные попадают туда, и он пуст.Поэтому я добавил if с возвратом на случай, если это произойдет.

Я также переписал возвращаемый оператор в фильтре на основе обратной связи, потому что он выглядел так, как будто он зацикливался и пытался отобразить новый компонент для каждой итерации.

Однако проблема по-прежнему остается в связи с отсутствием данных.Теперь таблица загружается с данными, но этот компонент просто возвращает div «Нет данных», как будто ничего не произошло.Я не уверен, связано ли это с хуком useMemo или с чем.Кроме того, без ошибок.

Спасибо за ваше время и обратную связь.

Еще одно обновление

UseMemo требовалось, чтобы реквизит был зависимостью в его массиве ... Я наконец-то вижу данные, когда я его консоль.log. 

const subHeaderComponentMemo = useMemo(
    () => <Filter data={people} onFilter={value => setFilterText(value)} />,
    [people]
  );

Однако, я снова получаю неопределенную ошибку 'map', как будто мои данные не в структуре, я ожидаю, что она будет. Я не изменил ее, и это код, который я используючтобы попытаться получить к нему доступ (как и раньше): 

  const types = [...new Set(data.types.map(type => type))];

Еще раз спасибо всем ... все ближе!

1 Ответ

1 голос
/ 27 сентября 2019

вы должны переписать свою подпись компонента, чтобы она соответствовала той, которую вы пытаетесь использовать 

const Filter = ({props, onFilter }) => // you are expecting a props name props

<Filter data={people} onFilter={value => setFilterText(value)} />, []); // you are passing data and setFilterText

, поэтому вы должны изменить ее на

const Filter = ({data, onFilter }) =>

...