Плоский список не рендеринг, даже когда я меняю состояние

Question

Expo-cli: 2.2.0

React-Navigation: 2.18.0

У меня есть два следующих экрана для React Navigation, где один предназначен для ввода деталей формы, а другой -экран, на котором пользователь может либо редактировать представленные материалы, либо подтверждать.

Мой интерфейс ввода выглядит следующим образом:

export default class PickDropInterface extends
 React.Component<NavigationProps<>> {

     this.state = { tasks: [],
     }

 onSubmit = () => { this.props.navigation.navigate("Confirmation",
 {tasks: this.state.tasks, deleteItem: this.deleteItem.bind(this)}); }

deleteItem = (key) => { var filteredTasks =
this.state.tasks.filter(function (item) {   return (item.key !==key);
 });

 render() { 

 return ( 

 <ItemDetail onSubmit={this.onSubmit} />  )  }

Экран моего подтверждения выглядит следующим образом:

export default class Confirmation extends React.Component<NavigationProps<>> { 

this.state={
    refresh: false,
  }

deleteItem = (key) => {
this.props.navigation.state.params.deleteItem(key);
 this.setState({
   refresh: !this.state.refresh
 })
}

_renderItem =({ item }) =>
(
<View style={styles.cardStyle}>
 <Button
    primary
    label="Delete" onPress= {() => {this.deleteItem(item.key)}} /></View>
  )

render() { 

return ( 
<FlatList data={task}
          renderItem= {this._renderItem}
          keyExtractor= {(item) => item.key.toString()}
          extraData={this.state} /> 
)
}

Ожидаемый вывод:

Кнопка удалениязапросить обновление в FlatList и показать новый список задач.

Токовый выход:

https://www.youtube.com/watch?v=RmrurTBQpak&feature=youtu.be

Answer 1

Я не знаю, почему FlatList не рендерил заново, но я нашел гораздо более простое решение для того, что я хотел.

Вместо этого я использовал условный рендеринг, и я думаю, что это способ сделать это вместо перехода на другой экран.

То, что я сделал, это:

Я создал новое состояние с именем orderComplete и установил для него значение по умолчанию.

Всякий раз, когда, это 'false', я сделал выше inputInterface для рендеринга, тогда как это было 'true', я сделал вышеупомянутый ConfirmationScreen рендеринг.

Подробнее о условном рендеринге можно найти в Официальная документация React.

Вышеприведенный FlatList теперь работает как шарм.