React Native添加待办时onPress触发后状态更新但屏幕白屏问题求助

调试方式影响说明 #

你使用Chrome浏览器调试的方式本身不会引发该问题，问题来源于代码逻辑错误。

核心错误点 #

• Array.push() 方法返回值是修改后数组的长度，而非新数组。你在handleSubmit中执行setAllTodos(allTodos.push(todo))时，原本存储数组的allTodos状态被赋值为数字类型，FlatList的data属性要求传入数组，传入非数组值后无法正常渲染，进而触发白屏。

修复方案 #

修改handleSubmit函数，采用不可变方式更新数组：

const handleSubmit = () => {
  // 写法1：展开运算符创建新数组
  setAllTodos([...allTodos, todo])
  // 更稳妥的写法：函数式更新，避免旧状态闭包问题
  // setAllTodos(prev => [...prev, todo])
  setTodo("")
}

额外优化建议 #

你当前注释了FlatList的keyExtractor属性，若后续出现重复的待办内容会触发React的唯一key警告，可以补充该属性：

keyExtractor={(item, index) => index.toString()}

内容的提问来源于stack exchange，提问作者Thinking of a name