React Native Expo 中按下按钮时如何更新 FlatList？

Question

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={() => {
        index = toDoList.length + 1
        toDoList.push({ task: {inputText}, id:{index} })
        setToDoList(...toDoList)
      }}>
        <Text style={styles.item}>Add Task</Text> 
      </TouchableOpacity>
      
      <FlatList
      data={toDoList}
      extraData={toDoList}
      renderItem= {({ item }) => ( <Text style={ styles.item }>{item.task}</Text>)}/>
    </View>
  );
}

当我单击“添加项目”按钮时，我希望它向平面列表添加一个新项目，并且它应该从 TextInput 组件获取任务。但是，当我尝试它时，它不会以任何方式更新 FlatList。为什么会发生这种情况？我认为这可能是 toDoList 未正确更新的问题，但我不确定。

Answer 1

<TouchableOpacity onPress={() => {
    let index = toDoList.length + 1;
    let newTask = { task: `${inputText}`, id: index };
    setToDoList([...toDoList, newTask])
}}>
    <Text style={styles.item}>Add Task</Text> 
</TouchableOpacity>