为什么对象道具不显示在平面列表中？

Question

    this.state={

      task : "",
      the_array : []


    };
  }

  handleTextChange=(some_task) =>{

    this.setState({
      task : some_task

    });
  }

  pushToList = () => {
    let taskitem = {
      name: this.state.task,
    };
    this.setState({
      the_array: [...this.state.the_array, taskitem],
    });
  }

  render() {
    return(
      <View style={{backgroundColor:'powderblue', height:'100%'}}>
        <FlatList data = {this.state.the_array}
          renderItem={(item) => <Text>{item.name}</Text>} keyExtractor={(item) => item.name} >
        </FlatList>        
        <TextInput style={{ backgroundColor: 'lightsteelblue', height:60, borderRadius : 25, marginBottom:20}} 
        onChangeText={this.handleTextChange}>
        </TextInput>

        <TouchableOpacity style={{
          backgroundColor: 'mediumpurple', height: 60, width: 80, alignSelf: 'center', borderRadius: 20, justifyContent: 'center',
          alignItems: 'center', marginBottom:20
        }} onPress={this.pushToList}>

这是我的代码。我正在尝试将 Textinput 内容添加到 Flatlist。为此，我在按钮 onPress 方法（'pushToList'）中定义了一个对象，命名为“taskitem”，并为其设置了一个名为“name”的道具。 “pushTolistMethod”应该将“名称”放入屏幕上的平面列表中。但奇怪的是它不起作用，当我按下按钮时没有任何反应。我想知道是否有人可以帮助我。

Answer 1

您可以像这样替换您的平面列表代码并尝试吗？

    <FlatList data = {this.state.the_array}
      renderItem={({ item }) => <Text>{item.name}</Text>} keyExtractor={(item) => item.name} >
    </FlatList>  

数据位于 item 键上，因此我们使用解构从函数内访问它。