React应用新增生日录入表单时无法同时更新多个state属性求助

问题根因 #

你的代码报错的核心原因是所有表单输入的change事件共用同一个处理函数，但处理函数没有区分输入类型，每次触发change事件都会尝试读取event.target.files[0]生成图片链接。
只有选择文件的input触发事件时，event.target才会存在files属性；输入姓名、年龄的文本输入框触发change时，event.target.files为undefined，读取[0]属性自然会抛出类型错误。

修复方案 #

只需修改myChangeHandler函数，仅当触发事件的是文件输入时，才执行图片链接生成逻辑即可：

myChangeHandler = (event) => {
  event.nativeEvent.stopImmediatePropagation()
  let nam = event.target.name
  let val = event.target.value
  const stateToUpdate = {
    [nam]: val
  }

  console.log('click')
  if (nam === 'age') {
    if (!Number(val)) {
      alert('Your age must be a number')
    }
  }
  // 仅文件输入时处理图片逻辑
  if (nam === 'filename') {
    stateToUpdate.file = URL.createObjectURL(event.target.files[0])
  }
  this.setState(stateToUpdate)
}

可选优化 #

1. 初始化state时添加file的默认值，避免初始渲染时img标签src为undefined：

this.state = {
  username: '',
  age: null,
  filename: null,
  file: ''
}

2. 渲染img时增加判断，只有存在图片地址时才展示，避免显示破裂图标：

{this.state.file && <img src={this.state.file} alt="Birthday Pic" />}

内容的提问来源于stack exchange，提问作者Manuel Esteban Morales Zuarez