Javascript React条件呈现-加载组件

在导航项目之间切换时，我试图调用加载组件。每次单击一次，它就会获取新数据，因此我希望在等待加载数据时将加载组件放在那里

我感到困惑的是，我正在映射数据以显示我的故事。在下面的映射中，我是否要在那里添加三元运算符来渲染'Loading/>组件？这就是我迷路的地方。我试着跟着

从“react”导入{useState，useffect}；
从“/Story”导入故事；
从“react router dom”导入{useParams}；
从“/Masthead”导入Masthead；
从“/LoadingBar”导入LoadingBar；
导出默认函数News（）{
const{section}=useParams（）；
控制台日志（“节：”，节）；
const[error，setError]=useState（null）；
const[results，setResults]=useState（null）；
useffect（（）=>{
取回(
`https://api.nytimes.com/svc/topstories/v2/${section}.json？api键=4fzCTy6buRI5xtOkZzqo4FfEkzUVAJdr`
)
.然后（（res）=>res.json（））
。然后（（数据）=>{
setTimeout（（）=>setResults（data.results），1500）；
console.log（“成功”，数据）；
})
.catch（（错误）=>{
console.log（“错误”，Error）；
设置错误（错误）；
});
}，[第节]；
如果（错误）{
返回错误：{Error.message}；
}否则如果（！结果）{
return；//首次提取数据时调用此加载栏，但在重新提取新数据时不重新呈现
}否则{
返回(

{results.map（（故事，索引）=>（//我要在这里添加三元运算符吗？
))}

);
}
}

带路由器的My App.js

从“react Router dom”导入{BrowserRouter as Router，Route}；
从“/components/Mashead”导入报头；
从“/components/News”导入新闻；
从“/components/Header”导入标题；
导入“/App.css”；
导出默认函数App（）{
返回(
);
}

还有我的桅顶部分，那里有我的导航设备

从“React”导入React；
从“react router dom”导入{NavLink}；
可变截面=[
“艺术”，
“业务”，
“健康”，
“家”，
“电影”，
“意见”，
“政治”，
“科学”，
“体育”，
“技术”，
];
导出默认函数Masthead（）{
返回(

{sections.map（（section）=>{
返回(

{section}

);
})}

);
}

我认为您的问题在于，每当结果为假时，都会显示加载条组件。但是，在执行获取之前，您不会将结果设置为null，因此它仍然会保留上次获取的内容，加载栏也不会再次呈现。

作为对该解释的后续建议，从用户体验的角度来看，在下一个故事仍在加载时删除所有故事有点不和谐。与其将结果设置为null，我建议添加一个

isLoading

状态，该状态可以显示下一个故事正在加载的某些状态，同时仍保持当前故事在屏幕上。当你说“某些状态”时，你在视觉上是什么意思？大多数网站都使用加载微调器等。我在加载组件中使用加载条，正如@PatrickRoberts所提到的，看到你的列表突然消失，被“加载”消息取代，新内容突然出现，在视觉上是没有吸引力的。我通常做的是使用

isLoading

类型的状态，它将触发显示加载消息的覆盖的可见性。在背景中，将是现有内容的“软化”图像。然后我加入一些过渡效果，这样就不会感觉太刺耳。