Javascript 为什么我在React Native中的平面列表没有'；是否更新，即使在添加额外数据之后？

在过去的几个小时里，我试图制作一个简单的列表，您可以通过在文本字段中键入一些内容并按下按钮来扩展该列表。但它不会更新我的平面列表，即使在更改了额外数据的内容之后。我做错了什么？ 请不要介意updateTask上的硬编码ID，它仅用于调试

import React, { Component } from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet, FlatList } from 'react-native'

const DATA = [
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
];

function Item({ title }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

class Inputs extends Component {
   state = {
      task: '',
   }
   handleTask = (text) => {
      this.setState({ task: text })
   }
   updateTask = (task) => {
      DATA.push({
        id: '4',
        title: task
      })
      alert(DATA.length + task);
   }
   render() {
      return (
         <View style = {styles.container}>

          <FlatList
             data={DATA}
             renderItem={({ item }) => <Item title={item.title} />}
             keyExtractor={item => item.id}
             extraData={DATA.length}
          />

            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Task"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {this.handleTask}/>


            <TouchableOpacity
               style = {styles.submitButton}
               onPress = {
                  () => this.updateTask(this.state.task)
               }>
               <Text style = {styles.submitButtonText}> Submit </Text>
            </TouchableOpacity>
         </View>
      )
   }
}
export default Inputs

const styles = StyleSheet.create({
   container: {
      paddingTop: 23
   },
   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },
   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },
   submitButtonText:{
      color: 'white'
   },
   item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
})

import React，{Component}来自“React”
从“react native”导入{View、Text、TouchableOpacity、TextInput、样式表、FlatList}
常数数据=[
{
id:'1'，
标题：“第一项”，
},
{
id:'2'，
标题：“第二项”，
},
{
id:'3'，
标题:"第三项",，
},
];
函数项（{title}）{
返回(
{title}
);
}
类输入扩展组件{
状态={
任务：“”，
}
HandletTask=（文本）=>{
this.setState（{task:text}）
}
更新任务=（任务）=>{
数据推送({
id:'4'，
标题：任务
})
警报（DATA.length+任务）；
}
render（）{
返回(
}
keyExtractor={item=>item.id}
extraData={DATA.length}
/>
this.updateTask（this.state.task）
}>
提交
)
}
}
导出默认输入
const styles=StyleSheet.create({
容器：{
加油站：23
},
输入：{
差额：15，
身高：40，
边框颜色：“#7a42f4”，
边框宽度：1
},
提交按钮：{
背景颜色：“#7a42f4”，
填充：10，
差额：15，
身高：40，
},
submitButtonText：{
颜色：“白色”
},
项目：{
背景颜色：“#f9c2ff”，
填充：20，
Margin:8，
marginHorizontal:16，
},
标题：{
字体大小：32，
},
})

更改

extraData={DATA.length}

到

希望能有所帮助。

改变

extraData={DATA.length}

到

---

希望它能有所帮助。

它使它变得更好，现在它有时会更新，但我无法确定何时更新。它感觉像是在随机更新，将数组置于状态，并且在状态发生变化时进行更新。它将重新渲染。（抱歉，坏了，恩）它使效果更好，现在它有时会更新，但我无法确定何时更新。它感觉像是在随机更新，将数组置于状态，并在状态发生变化时进行更新。它将重新渲染。（为坏消息感到抱歉）