如何解决当我使用useEffect从API获取对象时,无法以状态存储json obj
我试图在模式上显示对象的属性,但是在获取对象之后似乎什么也没发生。我试过不使用useEffect钩子,它确实存储了项目,但是后来我无法访问属性,我问了一下,一个用户告诉我使用use Effect。但是现在,似乎什么也没有存储...
这是我的代码:
import React,{useState,useEffect } from 'react';
const Modal = ({ handleClose,show,id }) => {
const showHideClassName = show ? "mod displayBlock" : "mod displayNone";
const [peliSeleccionada,setPeli] = useState([]);
useEffect(() => {
fetch(`http://localhost/APIpeliculas/api/pelicula/read_single.php/?ID=${id}`)
.then(res => res.json())
.then(
result => {
alert(result); //the alerts dont even pop up
setPeli(result);
alert(peliSeleccionada);
});
},[]);
return (
<div className={showHideClassName}>
<section className="mod-main">
<h5>EDITAR: </h5>
<label>
{ peliSeleccionada.Nombre }
</label>
<div className="btn-grupo">
<button type="button" className="btn btn-success btn-lg btn-block">Guardar cambios</button>
<button onClick={handleClose} type="button" className="btn btn-secondary btn-lg btn-block">Cerrar</button>
</div>
</section>
</div>
);
};
export default Modal;
我放入useEffect函数中的警报甚至不会弹出,并且一旦进入页面,我也会在控制台上收到此错误:
未捕获(承诺)语法错误:JSON中位置0的意外令牌
我还想访问对象的属性,这些属性是:ID,Nombre,Categoria和Director。这是正确的方法吗? {peliSeleccionada.Nombre}
解决方法
Object.getPrototypeOf(x) === Object.prototype
在组件渲染之后运行,类似于useEffect
的工作方式。
简而言之,这意味着组件将componentDidMount
然后触发提取。
您的return
状态存在问题,您将其声明为数组,但是像它是对象一样调用peliSeleccionada
。这意味着在第一次渲染时,它将为peliSeleccionada.Nombre
打印undefined
。
具有此功能的一种方法是将其与peliSeleccionada.Nombre
状态配对。
loading
最后但并非最不重要的一点是,错误发生在获取过程中,并且消息明确指出您没有捕获它。如果它在const Modal = () => {
const [loaded,setLoading] = useState(true);
const [peliSeleccionada,setPeli] = useState({});
useEffect( () => {
fetch()
.then(res => {
setPeli(res) // parse this accordingly
}) // or chain of thens if needed
.catch(err => {
setLoading(false);
console.log(err) // something failed in the fetch. You could have another state to mark that the fetching failed; close the modal,show an error,etc.
})
},[])
if(!loaded) return 'Loading...'
return (<div>Data goes here</div>) // be careful if the fetch failed,it won't show data!
}
调用中,则上面的代码有效。如果正在解析,则可能需要在fetch
try/catch
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。