如何显示通过fetch调用获取的数据，然后将其设置为数组，并在满足条件的情况下显示在Dom中。目前，我渲染页面的速度比获取数据并对其进行处理的速度更快。
提前致谢
function Profile() {
let myReceipe = [];
const [isPopUp, setPopUp] = useState(false);
ReceipeService.getReceipes().then(data => {
myReceipe = data;
})
const popUpHandler = () => {
setPopUp(!isPopUp);
}
return (
<>
<div className='profile'>
<ProfileHeader/>
<div className='createdposts'>
{myReceipe.length !== 0 ?
<Post popUpHandler={popUpHandler} myReceipe={myReceipe}/>
:
null
}
</div>
</div>
{isPopUp === true ?
<Magnify popUpHandler={popUpHandler}/>
:
null
}
</>
)
}
您的代码中的几个问题：
useEffect钩子发出HTTP请求myReceipe 应该处于组件状态渲染组件后，将始终加载数据。
您获取数据的方式不是正确的方式。React有useEffect专门为此目的而构建的钩子。从服务器获取数据是一个副作用，并且所有副作用都属于useEffect钩子内部。因此，将发出HTTP请求的代码移到useEffect挂钩中。
还要确保这myReceipe是组件的本地状态
const [myReceipe, setMyReceipe] = useState([]);
当服务器中的数据可用时，请更新状态以触发重新渲染，以便可以向用户显示数据。
useEffect(() => {
ReceipeService.getReceipes()
.then(data => {
setMyReceipe(data);
});
}, []);
当数据不可用时，向用户显示某种加载微调器，以向用户指示数据正在加载。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句