访问钩子的数据-React

Question

我请求这个API，然后我将结果保存在"数据"挂钩中。当我想打印"data.total_results"时，一切都可以，但当我想要打印一个包含更多数据的密钥时，它不会离开我"data.results[0].title">

import React, { useState, useEffect } from 'react';
const Movie = () => {
// Declara una nueva variable de estado, que llamaremos "count".
const [Data, setData] = useState("");
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();
}, [Data]);
return (
<div>
{Data.total_results}
{/* {Data.results[0].title} */}
</div>
);
}
export default Movie;

Answer 1

您需要检查是否定义了results属性。

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

工作演示：https://codesandbox.io/s/distracted-feather-4l55r

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

https://github.com/jogeshpi03/omdb-react

Answer 2

您的代码几乎是正确的。有一个错误，你可以做一些改进。

首先让我们来看一下useEffect钩子。

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

所以现在您的依赖项有一个错误，导致了一个无限循环。渲染组件时，执行useEffect中的函数。该函数最终将设置Data。当设置了Data的值时，将导致useEffect函数再次执行。它将为Data设置一个新值，Data将无限次地再次执行该函数。

如果您只想运行一次，那么修复方法是将依赖项设置为[]。像这样：

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 []

我希望这能解决你的问题。

现在我将建议一些改进：

我会将Data的初始状态设置为undefined

const [Data, setData] = useState();

然后在JSX中使用类似的条件

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

Answer 3

const[Data，setData]=useState([](

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;