React项目触发TypeError: Cannot read property 'split' of undefined如何解决？

函数组件中useState返回的状态更新方法不会自动合并旧状态的剩余字段，你执行setState({ testInfo: testInfoArray })时，会直接将整个state对象替换为仅包含testInfo字段的新对象，原有的selectedParagraph字段会被删除。下一次渲染执行到state.selectedParagraph.split("")逻辑时，state.selectedParagraph已经是undefined，调用split方法自然会抛出类型错误。

有两种常用的修复方式：

• 方案1：状态更新时手动合并旧状态
  调用更新方法时通过函数式更新拿到上一轮的完整状态，解构后覆盖需要修改的字段即可：

  setState(prev => ({
    ...prev,
    testInfo: testInfoArray
  }))
  

• 方案2：拆分独立状态（更推荐）
  当状态字段关联性不强时，直接拆分为多个独立的useState声明，从根源上避免状态合并问题：

  // 拆分后状态声明
  const [selectedParagraph, setSelectedParagraph] = useState("Hello World!")
  const [testInfo, setTestInfo] = useState([])
  

  更新时直接调用对应状态的更新方法即可，不会影响其他状态：

  setTestInfo(testInfoArray)
  

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