Javascript ReactJs设置状态不重新渲染

我尝试在reactjs中设置状态。值会更改，但视图不会重新渲染

此“我的事件”单击按钮并上载文件，将其设置为状态。（逻辑存储良好。一切正常。问题状态不会触发重新渲染

handleRear = async(e) => {
    const image = document.getElementById("foto_rear").files[0]
    const storageRef = storage().ref('registrasi/driver/' + uuidv1().toString() + '.jpg')
    const uploadTask = await storageRef.put(image)
    const getURL = await uploadTask.ref.getDownloadURL()
    console.log(getURL)
    firestore().collection('registrasi').doc(this.props.data.id)
      .set({
        foto: {
          foto_rear: {
            downloadURL: getURL.toString()
          }
        }
      }, {merge: true})
      console.log('Done')
    this.setState({urlFotoRear: <div>{getURL}</div>},
    () => console.log(this.state.urlFotoRear))
  };

handleRear=async（e）=>{
const image=document.getElementById（“foto_后方”）.files[0]
const storageRef=storage（）.ref（'registrasi/driver/'+uuidv1（）.toString（）+'.jpg'））
const uploadTask=wait storageRef.put（图像）
const getURL=wait uploadTask.ref.getDownloadURL（）
console.log（getURL）
firestore（）.collection（'registrasi'）.doc（this.props.data.id）
.设置({
福托：{
foto_后方：{
下载URL:getURL.toString（）
}
}
}，{merge:true}）
console.log（'Done'）
this.setState（{urlforear:{getURL}}，
（）=>console.log（this.state.urlforear））
};

此渲染函数

  render() {
    return (
      <div>
        <Grid container>
          <Grid item xs={3}>
            <div>
              {this.state.urlFotoRear}
            </div>
            <div>
              <input id="foto_rear" name="foto_rear" type="file" onChange={this.handleRear} value=""/>
            </div>
          </Grid>
        </Grid>
      </div>
    )
  }

render（）{
返回(
{this.state.urlFotoRear}
)
}

这是默认状态

constructor(props) {
    super(props);
    this.state = {
      urlFotoRear: <div>{this.props.data.foto.foto_rear.downloadURL}</div>,
    }
}

构造函数（道具）{
超级（道具）；
此.state={
URLFOTEREAR:{this.props.data.foto.foto_rear.downloadURL}，
}
}

构造函数（道具）{
超级（道具）；
此.state={
URLFOTEREAR:{this.props.data.foto.foto_rear.downloadURL}，
}
this.handleRear=this.handleRear.bind（this）
} 

我认为您的设置状态实际上触发了重新渲染，您只是看不到任何新内容，因为URL保持不变

您在

handleRear

中设置的状态看起来与

构造函数中的状态相同

this.state  = {urlFotoRear: <div>{this.props.data.foto.foto_rear.downloadURL}</div>}
... compare with ...
this.setState({urlFotoRear: <div>{this.props.data.foto.foto_rear.downloadURL}</div>})

您的构造函数中是否有
this.handleRear=this.handleRear.bind（this）
？如果没有，请添加它。请提供完整的代码。不，我的构造函数中没有handleRear。您不能直接更改状态，这就是setStatefor@SpeedOfRound我已经更新并删除了它。但仍然不走运。这个.setState（{urlforear:{this.props.data.foto.foto_rear.downloadURL}，（）=>console.log（this.state.urlFotoRear））这就是状态，我的意思是，如果你已经提供了一些关于此代码的解释，这将非常有用。这就是我在上面评论的内容，应该是解决方案。handleRear在事件期间被调用，除非你绑定它，否则无法访问此

。检查更新。我已经用getURL更新了，但在控制台中。div（状态更改）但在屏幕上仍然使用旧的，但当我关闭对话框。然后再次打开它。它使用新的值。（不重新加载）很抱歉，但我看不到你提供的代码片段中没有进一步的错误。也许如果你共享整个组件的代码，我们将能够找到一些东西。是的，我找到了。这是因为构造函数调用了两次idk为什么。

this.state  = {urlFotoRear: <div>{this.props.data.foto.foto_rear.downloadURL}</div>}
... compare with ...
this.setState({urlFotoRear: <div>{this.props.data.foto.foto_rear.downloadURL}</div>})

  handleRear = async(e) => {
    const image = document.getElementById("foto_rear").files[0]
    const storageRef = storage().ref('registrasi/driver/' + uuidv1().toString() + '.jpg')
    const uploadTask = await storageRef.put(image)
    const getURL = await uploadTask.ref.getDownloadURL()
    /// ...
    this.setState(
      {urlFotoRear: <div>{getURL}</div>},
      () => console.log(this.state.urlFotoRear)
    )
  };