如何將道具傳遞給 Reactjs 中的子組件

Question

我試圖將來自父組件 function 的道具傳遞給 React 中的孩子，但沒有任何運氣。 我正在使用React 數據表組件的過濾功能。 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"]}]

我正在嘗試創建“類型”屬性的唯一標記列表，該列表充當過濾器 onClick 而不是 onChange，就像原始搜索文本框示例一樣。 因此，根據樣本數據，我們最終會得到教授、科學、學生和數學的標簽。

如果您查看 Storybook 中的代碼，更具體地說，第 45 行：

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

我的數據是通過 API 調用加載的，我正在嘗試使用道具將該數據傳遞給 subHeaderComponentMemo，即

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

然后，我嘗試在第 20 行接收並循環遍歷該數據，並替換大部分代碼，以便它將呈現來自數據類型屬性的唯一標簽。

故事書代碼：

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>
      ))}
      ;
    </>
  );
};

我進行更改時遇到的錯誤之一是“無法讀取 'map' undefined 的屬性”，我將其等同於該組件可能在數據到達那里並且它是空的之前呈現的事實。 所以我添加了一個 if 和 return 以防發生這種情況。

我還根據反饋重寫了 Filter 中的 return 語句，因為它看起來確實會循環並嘗試為每次迭代呈現一個新組件。

但是，問題仍然存在，因為數據不存在。 該表現在正在加載數據，但該組件只是返回“無數據”div，就好像什么都沒發生過一樣。 我不確定這是由於 useMemo 鈎子還是什么。 除此之外，沒有錯誤。

感謝您的時間和反饋。

另一個更新

UseMemo 需要道具成為其數組中的依賴項......當我 console.log 它時，我終於看到了數據。

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

但是，我再次收到“地圖”未定義錯誤，好像我的數據不在我期望的結構中。我沒有更改它，這是我用來嘗試訪問它的代碼（如前所述）：

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

再次感謝大家......越來越近了！

Answer 1

您應該重寫組件簽名以匹配您嘗試使用的簽名

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