Question

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

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

这是根据搜索查询加载图像并将其放入数组的函数

 handlePress = async () => {
        console.log("function is called");
        fetch('http://localhost:5000/testData?title_picture=' + this.state.searchedValue, {
            "method": "GET"
        })
         .then((response) => response.json())
         .then((responseData) => {
             this.setState({newData: responseData,
                            loaded:true})
             console.log(this.state.newData);
         })
    }

这是加载图片

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

当我在 handlePress 函数内执行控制台日志时，我可以看到数组内有一张图片。但是当我在 ComponentDidMount() 中执行它时，它显示了一个空数组。我该如何解决这个问题？不能是空数组，否则无法将图片拖到画布上。

Answer 1

<块引用>

setState() 并不总是立即更新组件。有可能批处理或推迟更新。这使得阅读 this.state 在调用 setState() 之后是一个潜在的陷阱。

https://reactjs.org/docs/react-component.html#setstate

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

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

为什么状态没有更新？

1 个答案: