Json 访问hook-React的数据

我请求这个API，然后将结果保存在“数据”挂钩中。当我要打印“data.total_results”时，一切正常，但当我要打印包含更多数据的键时，它不会离开我“data.results[0]。title”

import React，{useState，useffect}来自“React”；
康斯特电影=（）=>{
//声明变量de estado，que llamaremos“count”。
const[Data，setData]=useState（“”）；
useffect（（）=>{
const Cargar=async（）=>{
let respuesta=等待获取（“https://api.themoviedb.org/3/discover/movie?api_key=ce322f54257cc9286282b320c5e9b2a0&language=en-美国&sort\u by=popularity.desc&include\u成人=false&include\u视频=false&page=1“；
让respuestaJSON=wait respuesta.json（）；
setData（respuestaJSON）；
};
Cargar（）；
}，[数据]；
返回(
{Data.total_results}
{/*{Data.results[0].title}*/}
);
}
导出默认电影；

您需要检查

结果

属性是否已定义

<div className="App">
  <h1>Total {Data.total_results}</h1>
  {typeof Data.results !== "undefined" &&
    Data.results.map((movie, index) => {
      return <h3>{movie.title}</h3>;
    })}
</div>

总计{Data.Total_results}
{typeof Data.results！==“未定义”&&
Data.results.map（（电影、索引）=>{
返回{movie.title}；
})}

工作演示：

几天前，我创建了一个存储库，并用React实现了OMDB API。这可能对你有帮助

---

您的代码几乎正确。这里有一个bug和一些可以改进的地方

首先让我们看一下<代码>使用效果< /COD> HOOK.

useffect

接受两个参数：函数和依赖项列表。第一次呈现组件时，当任何依赖项发生更改时，将再次执行函数参数

因此，现在您的依赖项有一个bug，它导致了一个无限循环。渲染组件时，可以在

useffect

中执行函数。该函数最终将设置

数据

。设置

数据

的值时，将再次执行

useffect

功能。这将为数据设置一个新值，它将无限期地再次执行该函数

修复方法是，如果只希望依赖项运行一次，则将依赖项设置为

[]

。像这样：

  useEffect(() => {
    const Cargar = async () => {
      let respuesta = await fetch("https://api.themoviedb.org/3/discover/movie?api_key=ce322f54257cc9286282b320c5e9b2a0&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1");
      let respuestaJSON = await respuesta.json();
      setData(respuestaJSON);
    };
    Cargar();
  }, []); // <-------- This changed to []

然后在JSX中使用条件语句，如下所示

if (!Data) {
  return <div>Loading...</div>
}

return (
  <div>
    {Data.total_results}
  </div>
);

if（！Data）{
返回加载。。。
}
返回(
{Data.total_results}
);

const[Data，setData]=useState（[]）

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
从“反应表”导入反应表
导入“react table/react table.css”
康斯特电影=（）=>{
//声明变量de estado，que llamaremos“count”。
const[Data，setData]=useState（[]）；
useffect（（）=>{
axios.get（“https://api.themoviedb.org/3/discover/movie?api_key=ce322f54257cc9286282b320c5e9b2a0&language=en-美国&sort\u by=popularity.desc&include\u成人=false&include\u视频=false&page=1“）
.然后（功能（响应）{
console.log（response.data.results）
setData（response.data.results）；
}).catch（函数（错误）{
console.log（错误）；
})
}, []);
返回(
{Data.map（函数（行，i）{
返回
{row.title}
})}
)      
}
导出默认电影；

好极了！我很惊讶没有其他人真正发现了无限循环。这是反应挂钩的基本概念，实际上这是我需要的

  const [Data, setData] = useState();

if (!Data) {
  return <div>Loading...</div>
}

return (
  <div>
    {Data.total_results}
  </div>
);

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import ReactTable from 'react-table'
import 'react-table/react-table.css'
const Movie = () => {
  // Declara una nueva variable de estado, que llamaremos "count".

const [Data, setData] = useState([]);
   useEffect(() => {
    axios.get("https://api.themoviedb.org/3/discover/movie?api_key=ce322f54257cc9286282b320c5e9b2a0&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1")
      .then(function(response) {
               console.log(response.data.results)
        setData(response.data.results);

      }).catch(function(error) {
        console.log(error);
      })
  }, []);

  return (<div>
  {Data.map(function (row, i) {  
        return <div key={i}>
        {row.title} 
     </div>
   })}
 </div>)      
}

export default Movie;