无法在 JSX 中映射和呈现数据答案

【问题标题】：Unable to map through and render data in JSX无法在 JSX 中映射和呈现数据
【发布时间】：2021-05-15 16:23:39
【问题描述】：

这和我之前的问题Incase, anyone wishes to refer to it有关

所以，我有一个movieList 组件

    function MovieList() {
      const [pageOneData, setPageOneData] = useState({});
    
      useEffect(async () => {
        await movieListApi.PageOneApi(
          (res) => {
            const pageOneData = res.data.page;
            setPageOneData(pageOneData);
            console.log("page one data: ", pageOneData);
          },
          (err) => {
            console.log(err);
          }
        );
      }, []);
    
      const movieList = pageOneData.contentItems || [];
      console.log(movieList);
    
      return (
    <div>
      <h4 className="text-white p-5">{pageOneData.title}</h4>
      <div className="grid grid-flow-row grid-cols-3 grid-rows-3 gap-7">
        <div>
          <img src="./assests/poster1.jpg" />
          {movieList.map((movie, key) => {
            console.log("movie", movie);
            console.log("movie name", movie.name);
            console.log("movie posterImage", movie.posterImage);
            const { name } = movie;
            console.log("name", name);
            <p className="text-white">{name}</p>;
          })}
        </div>
      </div>
    </div>
  );
    }

由于某种原因，我无法在渲染中打印（插入）数据。不过，该数据确实显示在logs 中。这可能是一件小而愚蠢的事情，只是想不通。

【问题讨论】：

标签： reactjs jsx

【解决方案1】：

在 map 函数中，您需要返回 <p> 元素。

{movieList.map((movie, key) => {
    console.log("movie", movie);
    console.log("movie name", movie.name);
    console.log("movie posterImage", movie.posterImage);
    const { name } = movie;
    console.log("name", name);
    return <p className="text-white">{name}</p>;
})}

【讨论】：

啊……！！但我上面确实有一个返回，它确实打印了h4，但没有打印p标签
但是你也需要在 map 函数中使用它

【解决方案2】：

就在这里。忘记使用return。当回调使用{} 时，return 是必需的。

  {movieList.map((movie, key) => {
        console.log("movie", movie);
        console.log("movie name", movie.name);
        console.log("movie posterImage", movie.posterImage);
        const { name } = movie;
        console.log("name", name);
         return <p className="text-white">{name}</p>;
      })}

【讨论】：