React中如何使用useState()正确为二维数组设置新值

你遇到的问题核心是违反了React状态的不可变更新原则，以及没有处理useState的闭包快照特性，具体问题和修复方案如下：

问题根因 #

1. 直接修改原状态数组
   如果你声明状态后直接调用content.push(word)修改原数组，再执行setContent(content)，此时数组的内存引用地址没有变化，React会认为状态没有更新，要么不触发重渲染，要么更新结果不符合预期。
   你之前用普通变量声明content时没有这个问题，是因为普通变量不受React状态更新规则限制，修改后的值可以直接被后续逻辑读取。

2. 循环更新时用了状态快照值
   如果你在遍历单词的循环里多次调用setContent([...content, word])，由于每次渲染拿到的content都是当前渲染周期的固定快照，循环里的每一次更新拿到的都是初始的数组值，最终只会保留最后一次添加的单词，之前的更新都会被覆盖。

修复方案 #

二选一即可：

• 方案1：先生成完整的新数组，再一次性更新状态
  遍历单词完成所有计算和组装后，生成一个完整的新数组再传给setContent，避免多次更新带来的问题：

const [content, setContent] = useState([])

const handleInputChange = (inputText) => {
  const words = inputText.split(' ')
  // 先生成新数组，完全不修改原状态
  const newContent = []
  words.forEach(word => {
    // 保留你原来计算单词宽度的逻辑
    const wordWidth = getSvgTextWidth(word)
    newContent.push({ text: word, width: wordWidth })
  })
  // 直接传入全新的数组
  setContent(newContent)
}

• 方案2：用函数式更新获取最新状态
  如果需要在循环里逐步更新状态，使用setState的函数式写法，每次更新都能拿到上一次更新后的最新状态：

const handleInputChange = (inputText) => {
  const words = inputText.split(' ')
  words.forEach(word => {
    const wordWidth = getSvgTextWidth(word)
    // 函数参数prev永远是上一次更新后的最新数组
    setContent(prev => [...prev, { text: word, width: wordWidth }])
  })
}

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