刷新后反应TypeError: articles[(articles.)]长度- 1)]未定义 &g

Question

我正在制作一个react应用程序，我有一个问题。每当我刷新页面时，我都会得到TypeError: articles[(文章)。长度- 1)]是未定义的，它的发生是因为SRC参数。我想显示我添加到json服务器的3篇最新文章的图像。但是如果我把src改成例如"在那之后，我运行服务器一切都很好。我可以改变src值回到文章[(文章。长度- 1)]并且没有刷新所有内容。我认为问题是，文章正在编译之前，他们得到json服务器的值，我不知道它如何可以被修复。我尝试了很多方法，比如获取更改，但都不起作用。

在ArticlesList.js

const ArticlesList = ({ articles }) => {

return (
<div className="whole">
{console.log(articles.length)}
<Carousel  fade> 
<Carousel.Item>
<img
className="d-block w-100"
src={articles[articles.length-1].img}
alt="First slide"
width="1100" height="400"
/>
<Carousel.Caption>
<h3>TESTESTESSTESTESTES</h3>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src={articles[articles.length-2].img}
alt="Second slide"
width="1100" height="400"
/>
<Carousel.Caption>
<h3>Second slide labelxd</h3>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src={articles[articles.length-3].img}
alt="Third slide"
width="1100" height="400"
/>
<Carousel.Caption>
<h3>Third slide label</h3>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
<CardGroup className="articles"> 
{articles.map((article) => (
<Col xs={4} md={4} lg={4} key={article.id}>
<Article article={article}/>
</Col>
))}
</CardGroup>
</div>
)
}

和在App.js中的

function App() {
const [articles, setArticles] = useState([])
useEffect(() => {
const getArticles = async () =>{
const articlesFromServer = await fetchArticles()
setArticles(articlesFromServer)
}
getArticles()
}, [])
const fetchArticles = async () =>{
const res = await fetch(
'http://localhost:5000/articles')
const data = await res.json()
return data
}
return (
<Router>
<>
<Header />
<Route path='/' exact render={(props) => (
<>
<ArticleList articles={articles} />
</>
)} />
<Route path='/details/:id' exact component={ArticleDetails} />
</>
</Router>
);
}

Answer 1

当您刷新页面时，应用程序试图从后端服务器获取数据，但您的组件ArticleDetails已经加载。由于articles状态是一个空数组，它将返回articles[articles.length-x]作为undefined(这反过来导致articles[articles.length-x].img中未捕获的错误)。

因此，在这种情况下使用可选链接，如下所示。

articles[articles.length-x]?.img

完整代码如下:

const ArticlesList = ({ articles }) => {

return (
<div className="whole">
{console.log(articles.length)}
<Carousel  fade> 
<Carousel.Item>
<img
className="d-block w-100"
src={articles[articles.length-1]?.img}
alt="First slide"
width="1100" height="400"
/>
<Carousel.Caption>
<h3>TESTESTESSTESTESTES</h3>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src={articles[articles.length-2]?.img}
alt="Second slide"
width="1100" height="400"
/>
<Carousel.Caption>
<h3>Second slide labelxd</h3>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src={articles[articles.length-3]?.img}
alt="Third slide"
width="1100" height="400"
/>
<Carousel.Caption>
<h3>Third slide label</h3>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
<CardGroup className="articles"> 
{articles.map((article) => (
<Col xs={4} md={4} lg={4} key={article.id}>
<Article article={article}/>
</Col>
))}
</CardGroup>
</div>
)
}

希望这能解决你的问题。

Answer 2

您的主要误解存在于App组件内部。您假设React componentDidMount生命周期将等待异步调用(在您的示例中为fetchArticles)。

发生的情况是，App组件将挂载，无论您的API是否已返回您所追求的文章。因此，每个不防范articles未定义值的组件都将以null异常失败。

为这些组件中的条目添加null检查。

Answer 3

我不知道React，但我建议这个

这是基于我的方法在Vue等。我会检查articles的长度之前做任何依赖于有内容在那里。

在你的渲染函数中，你可以插入一个if，例如这样:

const ArticlesList = ({ articles }) => {
let result = ""
if (articles && articles.length >0){
result += ( // Put things for .length-1 
)
} 
if (articles && articles.length >1){
result += ( // Put things for .length-2 
)
} 
if (articles && articles.length >2){
result += ( // Put things for .length-3 
)
}
return result 

如果这是不正确的React语法，请不要对我大喊大叫:我只是向你展示我将在Vue中使用的原则。

你可以把它做成一个循环来避免重复

你只需要说明一次如何显示一篇文章:

result = ""
const last3articles = articles.slice(Math.max(articles.length-3,0)).reverse()
last3articles.forEach(article=>{
result += ........// the part for a single article.
})