React 使用 map 迭代嵌套數組/對象。 渲染每個地圖功能是否必須返回？

Question

我是 React 的新手。 我正在構建一個小的功能組件來呈現 Pokemon 的弱點。

它將存儲在狀態 (pokemonState.types) 中的 Pokemon 類型作為每個類型的對象數組，將類型與包含所有類型有效性的 JSON 文件進行比較（見下文）。

types_data.json

  "electric": {
"attack": {
  "double": ["flying", "water"],
  "half": ["dragon", "electric", "grass"],
  "zero": ["ground"]
},
"defense": {
  "half": ["electric", "flying", "steel"],
  "double": ["ground"],
  "zero": []
}

為了獲得我想要的數據，我需要進行多次迭代，我注意到我的組件僅在我指定 return 關鍵字並將我的元素包裝在 HTML 標記中時才會呈現。

不呈現任何內容的函數（但 console.log 不返回 undefined）

  const pokemonTypeChart = () => {
if (!_.isEmpty(pokemonState)) {
  const allTypes = Object.entries(types_data);
  const typeEffectiveness = allTypes.map(([key, value]) => {
    pokemonState.types.map((el) => {
      if (el.type.name === key) {
        console.log(key, value);
        return <p>{el}</p>;
      }
    });
  });
  return (
    <div>
      <h1>Test</h1>
      <p>{typeEffectiveness}</p>
    </div>
  );
}};

運行良好的功能：

const pokemonTypeChart = () => {
if (!_.isEmpty(pokemonState)) {
  const allTypes = Object.entries(types_data);
  return (
    <div>
      <h1>Type Effectiveness</h1>
      {allTypes.map(([key, value]) => {
        return (
          <>
            {pokemonState.types.map((el, i) => {
              if (el.type.name === key)
                return <h3 key={i}>{value.defense.double}</h3>;
            })}
          </>
        );
      })}
    </div>
  );
}};

我的問題是：

• 對於不渲染任何東西的函數，問題是每次迭代后我都不使用 return 對嗎？
• 在這種情況下，我的第二個功能是好的做法嗎？ 有沒有更干凈的方式我應該寫它？

謝謝你的幫助。

Answer 1

您的第一個函數不起作用的原因是您正在返回<p>{el}</p> 。

el等於一個對象 & 你期待一個字符串。

具體來說，在這種情況下，它類似於{type:{name: "electric"}

如果你從return <p>{el}</p>; return <p>{el.type.name}</p>; ，然后修復我們內部的.map ，所以你越來越近了。

但是，您還有第二個問題……外部.map函數沒有返回任何內容。 您的typeEffectiveness變量是我們最終要渲染的變量，該變量等於調用allTypes.map的結果。 當您嵌套的pokemonState.types.map函數返回給父.map函數時，您的父.map函數沒有 return 語句。

最終，您正在渲染{typeEffectiveness} ，因此我們必須確保該變量是一個將渲染到 DOM 的 react 元素數組。

還有一些其他的小問題。 也就是說，我們必須在這里刪除段落標簽<p>{typeEffectiveness}</p>否則我們最終會得到嵌套的p標簽，因為typeEffectiveness列表中的每個項目都已經包含在<p></p> 。

最后，您還應該將關鍵標簽添加到您的列表項中。 <p key="{el.type.name}">{el.type.name}</p>

在此處深入了解列表和鍵的文檔： https : //reactjs.org/docs/lists-and-keys.html

以下代碼是您的第一個函數的調試版本。

我還在下面包含了您的部分功能的重構版本。 當我們真的只關心我們的pokemonState存在的類型時，映射整個types_data對象條目將是相當低效的，所以看看我在下面的方法。

 const e = React.createElement; const pokemonState ={types: [{type:{name: "electric"}}]}; let types_data = { "electric": { "attack": { "double": ["flying", "water"], "half": ["dragon", "electric", "grass"], "zero": ["ground"] }, "defense": { "half": ["electric", "flying", "steel"], "double": ["ground"], "zero": [] } } }; const PokemonTypeChart = () => { if (!_.isEmpty(pokemonState)) { const allTypes = Object.entries(types_data); const typeEffectiveness = allTypes.map(([key, value]) => { return (pokemonState.types.map((el) => { if (el.type.name === key) { return ( <p key="{el.type.name}">{el.type.name}</p> ); } })); }); return ( <div> <h1>Test</h1> {typeEffectiveness} </div> ); }}; const domContainer = document.querySelector('#pokemon'); ReactDOM.render(e(PokemonTypeChart), domContainer);

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script> <div id="pokemon"></div>

 const e = React.createElement; const pokemonState ={types: [{type:{name: "electric"}}]}; let types_data = { "electric": { "attack": { "double": ["flying", "water"], "half": ["dragon", "electric", "grass"], "zero": ["ground"] }, "defense": { "half": ["electric", "flying", "steel"], "double": ["ground"], "zero": [] } } }; const PokemonChart = () => { if (!_.isEmpty(pokemonState)) { const plistItems = pokemonState.types.map((item) => types_data[item.type.name].defense.double.map((i) => <p key={i}>{i}</p> )); return ( <div> <h1>Type Effectiveness</h1> {plistItems} </div> ); }}; const domContainer = document.querySelector('#pokemon'); ReactDOM.render(e(PokemonChart), domContainer);

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script> <div id="pokemon"></div>