访问钩子反应的数据
我请求这个API，然后将结果保存在“数据”钩子中。当我想打印"data.total_results“时，一切正常，但是当我想打印一个包含更多数据的键时，它不会留下"Data.results .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;回答 3
Stack Overflow用户
发布于 2019-11-14 04:35:04
您需要检查是否定义了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实现了OMDB。这可能对你有帮助。
Stack Overflow用户
发布于 2019-11-14 04:37:02
你的代码几乎是正确的。有一个bug和一些你可以做的改进。
首先，让我们看一下useEffect钩子。
useEffect有两个参数:一个函数和一个依赖项列表。第一次呈现组件时，当任何依赖项发生变化时，函数参数将再次执行。
所以现在，您的依赖项存在一个bug，导致无限循环。在呈现组件时，可以在useEffect中执行该函数。该函数最终将设置Data。当设置Data的值时，这将导致再次执行useEffect函数。它将为数据设置一个新的值，该值将再次执行该函数，并且是无限的。
修复方法是，如果只希望运行一次依赖项，则将依赖项设置为[]。如下所示：
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>
);Stack Overflow用户
发布于 2019-11-14 05:06:48
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;https://stackoverflow.com/questions/58849254
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号