Question

我正在创建晚餐决定者应用程序，并希望从用户输入中将项目添加到数组中。输入已添加到数组列表中，并显示在警报框中，但不会重新显示FlatList。请帮忙这是我的相同代码。

constructor(props){
    super(props);
    this.state = {items:[{key:'Pasta'},{key:'Pizza'}],userdata:''}
  }
  render() {
    return (
      <Container>
        <Header></Header>
        <Content style={{padding:20}}>
          <Text style={{fontSize: 30, textAlign:'center', marginVertical:30,}}>Food Decider</Text>
          <Item floatingLabel>
            <Label>Add Item</Label>
            <Input 
              onChangeText={(text) => this.setState({userdata:text})}
            />
          </Item>
          <Button block success style={{marginTop: 20,}}
             onPress={this.onSubmit.bind(this)}
          >
            <Text>Add Item</Text>
          </Button>
          <FlatList 
            data = {this.state.items}
            renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
          />
        </Content>
      </Container>      
    );
  }
  onSubmit(){
    this.state.items.push({key:this.state.userdata});
    alert(JSON.stringify(this.state.items));
  }

谢谢。

Answer 1

首先在onSubmit函数中，您没有设置状态，只是按下一个值

onSubmit(){
this.state.items.push({key:this.state.userdata});
alert(JSON.stringify(this.state.items));

}

应该是这样的

 onSubmit(){
let newState = this.state.items;
newState.push({key:this.state.userdata});
this.setState({items:newState});
alert(JSON.stringify(this.state.items));

}

并在这样的构造函数中绑定onSubmit函数

constructor(props){
super(props);
this.state = {items:[{key:'Pasta'},{key:'Pizza'}],userdata:''}
this.onSubmit = this.onSubmit.bind(this);

}

Answer 2

您需要在FlatList中使用prop legacyImplementation = true，以便实时更改FlatList。

使用：

<FlatList legacyImplementation=true />

Answer 3

在“平面”列表中，还有一个选项

"extraData={this.state.metaData}"

您可以使用它在操作完成后重置/重新加载FlatList，您可以这样使用：

constructor(props){
     super(props);
    this.state={
    metaData:false,
    }
}
<FlatList 
         data = {this.state.items}
         renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
         extraData={this.state.metaData}
          />

点击按钮后即可使用

onSubmit(){
   let {metaTAbBarData}=this.state
    this.state.items.push({key:this.state.userdata});
    this.setState({metaData:!metaData})
  }

当您单击提交按钮时，它将重新加载它会帮助你，它会帮助我

Answer 4

{ __typename, ...rest }

平面列表未根据状态更改更新

4 个答案: