React useState更新对象属性报toString未定义错误如何修复

报错来自两处代码写法错误：

• setInnerState( innerState['feedType'] = text) 是完全错误的状态更新写法。首先你直接修改了原state对象，违反React状态不可变原则；其次赋值表达式innerState['feedType'] = text的返回值是等号右边的text字符串本身，相当于你执行了setInnerState(text)，下一次渲染时innerState会直接变成你输入的字符串值，不再是带有feedType属性的对象。此时innerState.feedType读取结果为undefined，TextInput组件内部对value调用toString()方法时就会抛出「Cannot read property 'toString' of undefined」错误。
• useCallback依赖数组为空，回调函数内部会永久捕获首次渲染时的innerState值，存在闭包陷阱，后续输入会出现状态更新不及时的问题。

直接替换成下面的写法即可，用函数式更新的方式返回完整的新状态对象，既符合React状态更新规则，也不需要额外把state加到useCallback依赖里，从根源避免闭包问题：

const [innerState, setInnerState] = useState({
  feedType: 'bbong', 
})

const onChangeEtcfeedtype = useCallback((text) => {
  setInnerState(prevState => ({
    ...prevState,
    feedType: text
  }))
}, []);

<TextInput
  placeholder="input."
  value={innerState.feedType}
  onChangeText={onChangeEtcfeedtype}
/>

如果项目用了TypeScript，不建议给useState写any类型，明确state的结构类型可以在写代码阶段就拦截掉这类错误传参的问题，不用等到运行时才抛错。

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