標簽未在 React JSX 中返回

Question

我在<ul>標簽中調用一個方法，它假設給我每個流派的所有<li>標簽。 但它不起作用。 當我試圖控制數據時，它會完美記錄，但是當用 return <li>標簽替換代碼時，它不起作用。

調用方法：

<ul>{renderGenre(props)}</ul>

在控制台中記錄數據

const renderGenre = ({ movieData }) => {
      if (movieData.data) {
        var movie = movieData.data;
        movie.genres.map((Igenre) => {
          console.log(Igenre.name);
        });
      }
    };

返回<li>標簽（不起作用）

const renderGenre = ({ movieData }) => {
      if (movieData.data) {
        var movie = movieData.data;
        movie.genres.map((Igenre) => {
          return <li>{Igenre.name}</li>;
        });
      }
    };

Answer 1

您忘記從renderGenre函數返回。 改為嘗試如下：

const renderGenre = ({ movieData }) => {
   if (movieData.data) {
     var movie = movieData.data;

     // please notice here added return
     return movie.genres.map((Igenre) => {
        return <li>{Igenre.name}</li>;
     });
   }

   // also here to have a fallback return option
   return null;
};

通過這種方式，如果您在movieData.data有任何值，您將從您的函數中返回.map()函數的結果。 其他情況下，該函數僅返回null ，這是JSX的正確值。

如果您想以更短的方式呈現與以下相同的功能：

const renderGenre = ({ movieData }) => 
   movieData && movieData.data &&
      movieData.data.genres.map(({ name }) => <li>{name}</li>)

通常我會按照我的建議嘗試縮短渲染功能。