React Native Expo 待办应用：输入文本点击按钮无法添加新待办项

以下是导致点击按钮无法添加待办的全部基础疏漏点：

• 混用类组件与函数组件的API
  你在addTodoItem中调用了React.setState，该方法仅存在于类组件中，函数组件全局不存在这个方法，触发时会直接抛错中断逻辑。函数组件更新状态必须使用useState返回的对应set方法。同时你原本预想的把列表数据、当前条目key存在同一个state对象里的逻辑，和后面单独用useState定义data的写法是割裂的，两边状态不打通，自然无法实现新增。
• Button的事件绑定方式错误
  代码中写的onPress={addTodoItem()}会在组件渲染阶段就立即执行新增逻辑，而非等待用户点击。正确写法是直接传递函数引用onPress={addTodoItem}，而非带括号直接调用。
• 新增条目的数据结构错误
  你将待办条目的description字段直接赋值为<TextInput/>组件，没有把用户在输入框输入的文本作为条目内容存入列表。同时没有为新条目生成FlatList要求的唯一key值。
• 状态更新不符合React不可变原则
  复选框切换状态时，let newData = [...data]仅为浅拷贝数组，数组内的对象仍为原引用，直接修改对象属性的写法无法被React的状态监测机制捕获，会导致复选框状态更新失效。
• 组件属性误用
  TextInput部分：将占位提示文字"Insert new Item"直接设为输入框初始值，用户输入前需要手动删除原有文字，提示文字应当使用placeholder属性承载。样式部分：RN中删除线样式的属性名是textDecorationLine，不是textDecoration。
• FlatList缺少配置
  显式配置keyExtractor属性，避免列表渲染的key警告。

修正后可直接运行的完整代码 #

import React from 'react';
import { StyleSheet, SafeAreaView, FlatList, TextInput, View } from 'react-native';
import {Card, CheckBox, Button} from 'react-native-elements';

export default function App() {
  // 输入框内容状态
  const [inputText, setInputText] = React.useState("")
  // 待办列表状态
  const [todoList, setTodoList] = React.useState([
    {
      key: "1",
      description: "Do Dishes",
      completed: false
    },
    {
      key: "2",
      description: "Clean Living Room",
      completed: false
    },
  ])

  // 新增待办逻辑
  const addTodoItem = () => {
    // 输入为空时不执行新增
    if (!inputText.trim()) return
    const newTodo = {
      key: Date.now().toString(), // 用时间戳生成全局唯一key
      description: inputText.trim(),
      completed: false
    }
    // 不可变方式更新列表
    setTodoList(prevList => [...prevList, newTodo])
    // 新增完成后清空输入框
    setInputText("")
  }

  // 切换待办完成状态
  const toggleTodoComplete = (targetKey) => {
    setTodoList(prevList => 
      prevList.map(item => 
        item.key === targetKey 
          ? {...item, completed: !item.completed} 
          : item
      )
    )
  }

  // 渲染列表项
  const renderItem = ({item}) => {
    return (
      <CheckBox 
        center
        title={item.description}
        checked={item.completed}
        onPress={() => toggleTodoComplete(item.key)}
        textStyle={item.completed ? {textDecorationLine: "line-through"} : undefined}
      />
    )
  }

  return (
    <View>
      <SafeAreaView style={styles.container}>
        <Card>
          <Card.Title>TODO APP</Card.Title>
          <Card.Divider/>
          <FlatList 
            data={todoList} 
            renderItem={renderItem}
            keyExtractor={item => item.key}
          />
          <Card.Divider/>
          <TextInput
            onChangeText={setInputText}
            value={inputText}
            placeholder="Insert new Item"
            style={{padding: 8}}
          />
          <Button
            title="添加"
            onPress={addTodoItem}
          />
        </Card>
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

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