Встроенный в React Flatlist не обновляет данные

Я пытаюсь динамически добавить данные в свой плоский список с помощью следующего кода:

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>
    );
  }
}

Я могу отправить данные в объект «dados» с помощью this.state.dados.push({key:"value 3"}), но когда я переключаю переменную this.state.refresh на true, мой Flatlist не отображает последнее значение.

заранее спасибо


react-native react-native-flatlist
person Tesserato    schedule 05.12.2018    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вы никогда не должны изменять состояние напрямую. Попробуйте вызвать функцию 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
    })
}
person Helmer Barcos    schedule 05.12.2018
comment
Он работает частично, с вашим решением показывает только значение 3. Пытался переключиться на const {dados, refresh} = this.state; но результат был таким же. - person Tesserato; 09.12.2018
comment
Nervermind Я не учел, что эти «...» на самом деле являются частью синтаксиса. - person Tesserato; 09.12.2018

arrow_upward
0
arrow_downward

замените extraData = {this.state.refresh} на extraData = {this.state}

person Omar Faruque Sohag    schedule 07.12.2018

arrow_upward
0
arrow_downward

Чтобы обновить значение в состоянии, вы всегда должны использовать метод setState.

adicionar(){
    this.setState(prevState => ({
      dados: [...prevState.dados, {key:"value 3"}],
      refresh: !prevState.refresh
    })
    )
}
person akhil choudhary    schedule 06.12.2018
comment
обновить его, не объявленный в этой области - person Helmer Barcos; 09.12.2018
comment
Переменная обновления @HelmerBarcos должна быть внутри состояния, поэтому переместила ее в состояние - person akhil choudhary; 10.12.2018