使用React Navigation从React Native / Redux中的详细视图中删除

时间:2017-12-04 15:45:56

标签: react-native redux react-navigation

我正在使用Redux和React Navigation构建React Native应用程序。我无法弄清楚如何从它自己的视图中删除项目。它有一个非常简单的布局:

  • 第1级:索引 - 所有项目的列表。
  • 第2级:详细视图 - 详细传递项目的ID,然后将正确的数据从地图状态抓取到道具。

在详细视图中,我需要包含一个"删除"按钮,但当我更新状态(当然是不可变的)时,它仍然在查看详细视图并抛出大量错误,因为带有数据的数组元素根本不再处于状态。

我的Index.js渲染

render () {
  const { navigate } = this.props.navigation
  return (
    <View style={{flex: 1}}>
    <List>
      {
        this.props.inbox.map((el) => {
          return (
            <ListItem
              key={el.ownerId}
              title={el.owner}
              onPress={ () => navigate('MessageView', { ownerId: el.ownerId, ownerName: el.owner }) }
            />
          )
       })
     }
 ...
const mapStateToProps = (state) => {
  return {
    inbox: state.inboxReducer.inbox
  }
}

详细信息视图

  _deleteMessage () {
    this.props.navigation.goBack()
    this.props.deleteMessage(this.props.queued_msg._id)
  }
...
render(){
   <Button
      backgroundColor='#E81E63'
      title="Login"
      onPress={this._deleteMessage.bind(this)}
      buttonStyle={styles.button}
      title='Delete Message' />
}

我的状态数组是什么样的:

queue: [
    {
      _id: 1,
      owner: 'John Lennon',
      owner_id: 1,
      walker: 'Sally Sue',
      scheduled_for: new Date(),
      walker_id: 1,
      message: 'Rex peed and pooped.',
      logged_at: new Date()
    }
...]

0 个答案:

没有答案