React Native中setState向数组state追加数据不生效如何解决

你的代码有3处错误，直接导致数组更新异常、拿不到最新值：

1. 状态更新逻辑冗余嵌套：你提前定义的updatedData已经是拼接了新任务条目的完整一维数组，结果调用setData时又在函数式更新里把整个updatedData作为单个元素追加，最终会生成嵌套结构的数组，不符合预期。
2. 对React状态更新机制理解错误：React的状态更新是异步批处理的，调用setData后不会同步修改当前函数作用域里的data变量，你紧接着写的console打印、路由传参拿到的都是更新前的旧空数组，所以日志永远显示空。
3. TextInput事件绑定冗余：你同时给输入框绑定了onChangeText和onChange到setTask，其中onChange回调返回的是事件对象而非输入文本，会导致task值被异常覆盖。

1. 修正数组更新逻辑，去掉冗余的展开操作，直接在函数式更新里拼接新条目
2. 需要用到最新状态值的逻辑（路由传参、日志打印），直接在setData的更新函数内拿到最新数组后执行，不要依赖外层作用域的旧data变量
3. 删除TextInput上多余的onChange绑定，只保留onChangeText即可

修复后的核心代码片段：

const handleSubmit = () => {
  console.log("submit pressed for task = ", task)
  // 构造新的任务条目
  const newTask = {
    task: task,
    key: Math.random().toString(),
  }
  setData(prevState => {
    // prevState是保证最新的上一轮状态值
    const latestData = [...prevState, newTask]
    // 在这里拿最新数组传参、打日志
    console.log("data after adding task", latestData)
    navigation.navigate("Tasklist", {data: latestData})
    return latestData
  })
}

// 输入框部分修改
<TextInput
  style={styles.input}
  onChangeText={setTask}
  value={task}
  placeholder="Type your task"
  keyboardType="ascii-capable"
/>

如果后续需要在组件其他位置用到data的最新值，要么在useEffect里添加data作为依赖项，在依赖触发时执行对应逻辑，要么始终在函数式更新的回调里读取prevState做计算，不要在调用setState后立刻读取外层的state变量，闭包捕获的旧值会导致逻辑异常。

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