反应-将图像存储在状态中会导致文本更新延迟

Question

我需要上传大约。 20张图片。确认提交表单后，必须将图像上传到服务器（php）。当图像以状态存储为文件时，更新文本输入字段的可见延迟小于200ms。文本字段更新后，显示图库的功能也被触发，我可以在Chrome的“网络”标签中看到以下网络请求（等于图库中的图像） Blob：http://localhost:3000/f2e79d6f-c898-4e31-a4ce-13ae919b4916 这可能是造成延迟的原因。我不是那么有经验，所以我想请您查看所附的代码示例，其中我显然犯了一些可怕的错误，但看不到它。 它是较短的版本，只是为了显示图像的显示方式。

class CreateProduct extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
         productData: [],
         testVal1:100
      }

    this.displayProductGallery = this.displayProductGallery.bind(this)
    this.handleInputChange = this.handleInputChange.bind(this)
}

handleInputChange(e) {
    let name = e.target.name
    let currentState = this.state
    let stopProcessing = false

    this.setState({name:e.target.value}) 
}


   displayProductGallery() {
      let objectId = this.state.productData.findIndex(obj => obj.customType === "gallery")
      console.log("load  gallery")
      if (objectId > -1) {
        return (
          <div>
            <div>
              {this.state.productData.map((item, index) =>
                item.customType === "gallery" &&
                <div style={{ maxWidth: "20%", margin: 3, display: "inline-block" }}>
                  <img draggable onDragOver={(e) => this.onDragOver(e, index)} onDrop={(e) => this.onDrop(e, index)} onDragEnter={(e) => this.onDragEnter(e, index)} onDragStart={(e) => this.onDragStart(e, index)} src={URL.createObjectURL(this.state.productData[index])} style={{ maxWidth: "100%", maxHeight: "100%" }} alt="Generic placeholder image" />
                </div>
              )}
            </div>
           </div>
        )


      } else {
        return null
      }
    }


    render() {
      return (
        <Card style={{ marginTop: 12 }}>
        <CardBody>
            {this.displayProductGallery()}
            <Input type="text" value={this.state.testVal1} style={{ textAlign: "center", fontSize: 12 }} onChange={(e) => this.handleInputChange(e)} name="testVal1" placeholder="testVal1"/>
        </CardBody>
        </Card>

      )
    }

}


  export default CreateProduct;