Javascript 为什么状态没有被更新？

我试图加载基于搜索查询的图像，并能够拖动它们。例如，当我输入单词“猫”时，我可以看到猫的图片。 这是键入搜索词的代码：

<input type="text" value={this.state.searchedValue} onChange={(e)=>{this.setState({searchedValue: e.target.value})}}/>  
<button onClick={() => this.handlePress()}>Search</button>           
                            

这是为了加载图像

{this.state.newData.map((data) => (
                                            
                                            <div class="dragImg">
                                                
                                                  
                                                 <img src={data.picture} class="img"/> 
                                               
                                                
                                              </div>
                                         ))}

{this.state.newData.map（（数据）=>(
))}

当我在

handlePress

功能中执行控制台日志时，我可以看到阵列中有一张图片。 但当我在

ComponentDidMount（）

中执行此操作时，它会显示一个空数组。我怎样才能解决这个问题？它不能是空数组，否则我无法将图片拖到画布上

setState（）并不总是立即更新组件。可能 批处理或将更新推迟到以后。这使得阅读成为一种状态 就在调用setState（）之后，这是一个潜在的陷阱

在您的情况下，我看不出有任何理由在“handlePress”方法中对状态而不是响应值进行操作。 如果您确实需要它，那么可以使用setState回调

this.setState({
  newData: responseData,
  loaded:true
}, () => {
  console.log(this.state.newData)
})

---

当您的组件第一次在DOM中加载时，ComponentDidMount将调用，我认为第一次您的数组将为空。搜索后是否看到图像？显示图像。但是数组是空的。要能够在div class=“dragImg”中拖动，它不能是空数组。如果确实显示了图像，那么数组怎么可能是空的？您正在显示来自数组数据的图像，对吗？在Handlepress函数中数组不是空的。但在ComponentDidMount函数中它是空的。因此，我无法拖动图片。ComponentDidMount中的空数组是预期的，因为您是通过API调用获取数据的。如果不能有空数组，请在组件的construction（）{}上的状态中添加一些占位符图像。

this.setState({
  newData: responseData,
  loaded:true
}, () => {
  console.log(this.state.newData)
})