React useState异步更新数组状态不触发视图更新问题解决

React 中数组、对象这类引用类型的状态更新遵循不可变规则：只有传入和原状态引用地址不同的新值，React 才会判定状态发生变更，触发视图重渲染。
你的代码里直接调用values.push(input)是在原状态数组上做原地修改，之后传给setValues的还是原数组的同一个引用，React 做状态对比时检测不到引用变化，自然不会触发重渲染。
除此之外代码还有3处容易出问题的点：

• 状态命名不一致：定义输入框状态时写的是setInputs，后续onChange里调用的是setInput，会直接报函数未定义错误
• input的onChange回调没有接收事件参数e，无法正常拿到输入值
• useCallback依赖项加入了values，每次values变化都会重新生成add函数，且闭包很容易捕获到旧的状态值，导致更新逻辑异常

用函数式更新+新建数组的方式修改状态，不需要依赖当前values值，从根源避免闭包问题：

const [values, setValues] = useState<string[]>([])
// 统一状态更新函数命名，初始值给空字符串避免undefined问题
const [input, setInput] = useState<string>('')

const add = useCallback(() => {
  // 过滤空输入
  if(!input.trim()) return
  // 函数式更新永远能拿到最新的状态值，不需要把values加入依赖
  // 用展开运算符生成新数组，和原数组引用完全不同，React可以正常检测到变化
  setValues(prevValues => [...prevValues, input])
  // 可选：添加后清空输入框优化交互
  setInput('')
}, [input])

{/* 受控组件绑定value，onChange接收事件参数 */}
<input 
  value={input}
  onChange={(e) => setInput(e.target.value)} 
/>
<button onClick={add}>Add</button>

{/* 列表渲染如果没有重复值，优先用值本身作为key，比索引更稳定 */}
{values.map((value, idx) => {
  return (
    <div key={`${value}-${idx}`}>{value}</div>         
  )
})}

• 永远不要直接在原状态数组上调用push/pop/splice/sort/reverse这类会修改原数组的方法
• 新增元素：setList(prev => [...prev, newItem])
• 删除元素：setList(prev => prev.filter(item => item.id !== targetId))
• 修改元素：setList(prev => prev.map(item => item.id === targetId ? {...item, 修改属性: 新值} : item))
• 如果确实要用会修改原数组的方法，一定要先做浅拷贝生成新数组再操作：const newList = [...oldList]; newList.push(newItem); setList(newList)

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