Question

Expo-cli：2.2.0

反应导航：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。

每当它为“ false”时，我都会在上面输入inputInterface进行渲染，而当它为“ true”时，我会进行上述ConfirmationScreen渲染。

有关条件渲染的更多信息，请参见React's official documentation.

上面的FlatList现在就像一个魅力。

即使我更改了状态，平面列表也不会重新呈现

1 个答案: