ReactJS/NextJS状态数组在setState之后未呈现

Question

我在React/NextJS中使用.map((渲染对象时遇到问题。

我有一个从Firebase云存储获取图像的功能，代码如下：

getImages = () => {
let firebase = loadFirebase()
var storageRef = firebase.storage().ref('chest')
let { state } = this
storageRef.listAll().then((result) => {
let data = []
result.items.forEach((imageRef) => {
imageRef.getDownloadURL().then((url) => {
data.push(url)
}).catch((error) => {
// Handle any errors
})
})
state.images = data
this.setState({ images: data })
}).catch((error) => {
// Handle any errors
})
}

这部分似乎在我取回数据并更新状态时起作用，结果如屏幕截图所示：设置状态后的结果

然后我用下面的代码绘制图像：

{ this.state.images.map((image, index) => {
return (
<img
key={ index }
src={ image }
alt=""
/>
)
})}

在同一页上，我还有其他地方可以从Firebase获取数据，相应地设置状态，并使用.map((渲染对象。在这些情况下，它运行得非常好。不同的是，在这些情况下，我使用getInitialProps

但在这两种情况下，状态都是在componentDidMount((中设置的，this.state返回的最终结果看起来像所附的屏幕截图。

如有任何帮助和/或改进，我们将不胜感激。

Answer 1

您永远不应该手动设置状态值。在调用setState之前，您应该删除将图像设置为该状态的行。这条线阻止了渲染，因为在那之后，当您使用setState:设置状态时，react无法检测到任何更改

getImages = () => {
let firebase = loadFirebase()
var storageRef = firebase.storage().ref('chest')
storageRef.listAll().then((result) => {
let data = []
result.items.forEach((imageRef) => {
imageRef.getDownloadURL().then((url) => {
data.push(url);
this.setState({ images: data });
}).catch((error) => {
// Handle any errors
})
});
}).catch((error) => {
// Handle any errors
})
}