React Native Expo中点击按钮无法更新FlatList的问题排查

你的代码存在几个关键问题，导致点击按钮后FlatList无法更新，逐一说明并修复：

1. 直接修改原状态数组
   React要求状态不可变，你用toDoList.push()直接修改了原状态数组，React无法感知到状态变化，因此不会触发组件重渲染，FlatList自然不会更新。

2. setState调用错误
   setToDoList(...toDoList)的写法完全错误，展开运算符在这里会把数组的每个元素作为单独参数传给setState，而我们需要传入的是一个完整的新数组作为新状态。

3. task字段赋值错误
   task: {inputText}会把task设置成一个包含inputText属性的对象，后续渲染{item.task}时会显示[object Object]，应该直接赋值为inputText的字符串值。

4. 未声明变量
   index = toDoList.length + 1没有用const声明，会变成全局变量，存在作用域污染问题。

修复后的完整代码：

export default function App() {
  const [toDoList, setToDoList] = React.useState([
    { task:'dishes', id:'1'},
    { task:'laundry', id:'2'},
    { task:'dishes', id:'3'},
    { task:'laundry', id:'4'},
    { task:'dishes', id:'5'},
  ])

  const [inputText, setText] = React.useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        onChangeText={newText => setText(newText)}
        value={inputText}
        placeholder='Input Task'
      />
      
      <TouchableOpacity onPress={() => {
        // 声明变量避免全局污染，转成字符串保证id类型统一
        const newId = (toDoList.length + 1).toString();
        // 基于原数组创建新数组，遵循状态不可变原则
        const newToDoList = [...toDoList, { task: inputText, id: newId }];
        // 用新数组更新状态
        setToDoList(newToDoList);
        // 清空输入框提升体验
        setText('');
      }}>
        <Text style={styles.item}>Add Task</Text> 
      </TouchableOpacity>
      
      <FlatList
        data={toDoList}
        extraData={toDoList}
        renderItem={({ item }) => ( <Text style={ styles.item }>{item.task}</Text>)}
        keyExtractor={(item) => item.id} // 添加keyExtractor避免渲染警告
      />
    </View>
  );
}

额外说明：

• 新增keyExtractor属性，FlatList需要每个item有唯一key来优化渲染逻辑，避免控制台警告。
• 点击添加后自动清空输入框，优化用户操作流程。

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