React-native Flatlist 不刷新数据

Question

我正在尝试使用以下代码动态地将数据添加到我的平面列表中：

import React, { Component } from 'react';
import { View, Text,FlatList,Button,Alert} from 'react-native';

export default class Lista extends Component {
  constructor(props) {
    super(props);
    this.state = {dados: [
      {key:"valeu 1"},
      {key:"value 2"}
    ],
    refresh : false
    };
  }

  adicionar(){
    this.state.dados.push({key:"value 3"})
    this.state.refresh = !this.state.refresh

  }

  render() {

    return (
      <View>
        <FlatList
        data= {this.state.dados}
        extraData = {this.state.refresh}
        renderItem={({item}) => <Text>{item.key}</Text>}
        />
        <Button title="Adicionar"
            onPress={this.adicionar.bind(this)}>      
        </Button>
      </View>
    );
  }
}

我可以使用 this.state.dados.push({key:"value 3"}) 将数据推送到“dados”对象，但是当我将 this.state.refresh 变量切换为 true 时，我的 Flatlist 不会呈现最后一个值。

提前致谢

Answer 1

你不应该直接改变状态。尝试调用this.setState() 函数以执行更好的应用程序开发。这可能是 Flatlist 没有被重新渲染的原因。

adicionar(){
    const { refresh, dados } = this.state;
    this.setState({
      dados: [...dados, {key:"value 3"}], //that is a better way to update Array-States
      refresh: !refresh
    })
}

Answer 2

请将extraData = {this.state.refresh} 替换为extraData = {this.state}

Answer 3

要更新 state 中的值，您应该始终使用 setState 方法。

adicionar(){
    this.setState(prevState => ({
      dados: [...prevState.dados, {key:"value 3"}],
      refresh: !prevState.refresh
    })
    )
}