React开发中出现Cannot create property label on string报错该如何解决？

错误原因 #

你在state中初始化SPCCODE、destinationcode的值为字符串类型的空值：

SPCCODE: '',
destinationcode: '',

JavaScript中字符串属于原始值类型，不是引用类型的对象，无法直接新增自定义的label属性，你在getReport函数中直接执行this.state.SPCCODE.label = 'NA'操作时，就会触发本次报错。

另外你选择操作时SPCCODE可以正常访问label属性，是因为Select组件的onChange回调返回的是包含label、value属性的选项对象，触发handleChangeSPC时你把state中的SPCCODE覆盖成了对象类型，但若用户未触发过选择操作，SPCCODE还是初始的字符串类型，调用getReport就会报错。同时直接修改state属性不符合React的immutable规范，会导致状态更新不触发重渲染等衍生问题。

修复方案 #

1. 调整state初始化结构，统一为和Select返回值一致的对象格式：

SPCCODE: {label: '', value: ''},
destinationcode: {label: '', value: ''},

2. 修改getReport函数，使用setState更新状态，不要直接修改state属性：

getReport(ReportList) {
  this.setState({
    SPCCODE: {...this.state.SPCCODE, label: 'NA'},
    destinationcode: {...this.state.destinationcode, label: 'NA'}
  })
}

3. 可选优化：在render中使用SPCCODE时增加兜底判断，避免空值报错：

value={hide ? null : (SPCCODE || {})}

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