在 React 中渲染嵌套的 JSON 项答案

【问题标题】：Render nested JSON items in React在 React 中渲染嵌套的 JSON 项
【发布时间】：2020-09-24 15:38:12
【问题描述】：

我是 React 新手，我正在学习如何从公共 API 获取数据的教程。

在这种情况下，我可以渲染“父”项，例如 Title，但是我找不到渲染（嵌套）子项（例如 Ratings）的方法。这是我收到的错误“TypeError: movie.Ratings is undefined”。

这是 JSON 格式的请求结果：

这是我的 React 代码：

import React, { useEffect, useState } from "react";
import "./App.css";

function App() {

  const [movie, getMovie] = useState([]);

  useEffect(() => {
    const getData = async () => {
      const response = await fetch("https://www.omdbapi.com/?apikey=XXXXXXXX&t=Parasite");
      const json = await response.json();
      getMovie(json);
    };

    getData();

  }, []);

  return (
    <div className="App">
      <ul>
        <li>{movie.Title}</li>
        {movie.Ratings.map(Score => (
          <li>{Score.Source}</li>
        ))}
      </ul>
    </div>
  );

}

export default App

【问题讨论】：

你有什么错误吗？或者你想得到什么结果？
但是你正在渲染收视率
对不起，我忘了包括错误。这是我收到的错误“TypeError：movie.Ratings is undefined”。我会更新问题。
如果定义了movie && movie.Ratings，则需要渲染组件

标签： reactjs

【解决方案1】：

你可以添加 ? （可选链接）仅在有电影时映射

 {movie.Ratings?.map(Score => (
      <>
      <li>{Score.Source}</li>
      <li>{Score.Value}</li>
      </>
    ))}

【讨论】：

谢谢迪佩什。如前所述，我是 React 新手，但这看起来非常优雅和简单。这行得通，但是您将如何使用此方法在每个对应的 Source 下渲染 Value？
没关系 Dipesh，我刚刚想通了。我可以简单地使用“
{Score.Source}: {Score.Value}

是的。你可以随心所欲:)

我认为只需添加“？” （可选链接）仅在有您在答案中建议的电影时才映射是解决此问题的最简单和最干净的方法。我在选择你的答案。谢谢迪佩什。

很高兴帮助你兄弟:)

【解决方案2】：

我注意到了一些事情

const [movie, getMovie] = useState([]); 您将其初始化为movie 的数组，它应该是 const [movie, getMovie] = useState({});

function App() {

  const [movie, getMovie] = useState({});

  useEffect(() => {
    const getData = async () => {
      const response = await fetch("https://www.omdbapi.com/?apikey=XXXXXXXX&t=Parasite");
      const json = await response.json();
      getMovie(json);
    };

    getData();

  }, []);

  if (!movie.Ratings || movie.Ratings.length === 0) return null;

  return (
    <div className="App">
       <ul>
         <li>{movie.Title}</li>
         {movie.Ratings.map(score => (
           <li>{score.Source}</li>
         ))}
      </ul>
    </div>
  );
}

或者返回块也可以不用if也可以这样写

return (
    <div className="App">
       <ul>
         <li>{movie.Title}</li>
         {movie.Ratings && movie.Ratings.map(score => (
           <li>{score.Source}</li>
         ))}
      </ul>
    </div>
  );

【讨论】：

感谢您的帮助 Hendrix。我刚刚尝试了您的修改，现在我收到“TypeError：movie.map 不是函数”。
谢谢，这行得通。但这是否意味着我必须重复“if (!movie.Ratings || movie.Ratings.length === 0) return null;”对于我要渲染的每个嵌套项目？
我也添加了另一种方法，取决于你想怎么做。