Question

我尝试在reactjs中使用setState。值更改但视图未重新渲染

此事件单击按钮并上传文件，将其设置为状态。（逻辑存储良好。一切都很好。问题状态不会触发重新呈现。

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))
  };

此渲染功能

  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>
    )
  }

此默认状态

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

Answer 1

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

Answer 2

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

您在handleRear中设置的状态看起来与constructor中的状态相同。

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()方法写这个吗？

  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)
    )
  };

ReactJs setState不重新渲染

2 个答案: