React表单setState修改imageUrl后提交仍为初始null值如何解决？

问题根因 #

你通过上传组件回调setState更新imageUrl时，只是修改了组件自身的state，没有触发TextField的onChange事件。如果你用的是表单库（比如Formik、React Hook Form）或者原生表单收集逻辑，这类逻辑依赖输入框的onChange事件同步内部字段状态，没触发事件的话表单内部存储的imageUrl还是初始的null值，提交时自然读不到更新后的值。

解决方案 #

你可以选以下任意一种方式解决：

方案1：提交时直接读取组件state #

如果表单提交逻辑是你自己实现的，不需要依赖表单组件自动收集字段值，提交的时候直接从this.state取imageUrl即可，不需要读表单字段的值。

方案2：更新imageUrl时手动触发onChange同步表单状态 #

在上传成功的回调里，除了setState，同时手动调用onInputchange方法，构造符合要求的事件对象同步表单状态：

if (event === 'success') {
  const newUrl = info.secure_url
  this.setState({
    imageUrl: newUrl,
  })
  // 手动触发onChange同步表单状态
  this.onInputchange({
    target: {
      name: 'imageUrl',
      value: newUrl
    }
  })
}

方案3：把TextField设为非受控组件 #

如果你不需要监听输入框的手动修改，直接用defaultValue代替value，同时给TextField加ref，上传成功后直接修改ref指向的输入框的值：

// 构造函数里加ref
constructor(props) {
  super(props);
  this.imageUrlRef = React.createRef();
  // 其余原有代码
}

// 上传成功回调修改
if (event === 'success') {
  const newUrl = info.secure_url
  this.setState({
    imageUrl: newUrl,
  })
  this.imageUrlRef.current.value = newUrl
}

// render里的TextField修改为
<TextField 
  name='imageUrl' 
  defaultValue={this.state.imageUrl} 
  ref={this.imageUrlRef}
  onChange={this.onInputchange}
/>

内容的提问来源于stack exchange，提问作者Arslan