Question

因此，我正在使用firestoreConnect来侦听特定文档。我为此一直苦苦挣扎，并确保firestoreConnect调用正在侦听该文档。当我在Firebase控制台中向文档添加字段时，它会在react中显示。因此，人们期望当我从文档中删除一个字段时，它会监听该字段并在响应中消失。但它仍然存在，直到我重新加载。

import React from 'react'
import {connect} from 'react-redux'
import {Redirect, Link} from 'react-router-dom'
import routes from '../../../config/routes'
import {compose} from "redux";
import {firestoreConnect} from "react-redux-firebase";
import {deletePlaylist} from "../../../store/actions/patientActions";

class PlaylistList extends React.Component {

  state = {
  }

  deletePlaylist = (name) => (event) => {
    this.props.deletePlaylist(name)
  }

  render() {

    const {loggedIn, playlistsCollection} = this.props

    const {id, ...playlists} = !!playlistsCollection && playlistsCollection

    if (!loggedIn) {
      return <Redirect to={routes.login}/>
    } else {
      return (
        <div className="container">
          <div className="row mt-5">
            <div className="col">
              <div className="jumbotron text-center">
                <h2 className="border-bottom pb-3 mb-5">Your playlists:</h2>
                {
                  Object.keys(playlists).map((name, index) => {
                    return (
                      <div key={index} className="row mt-4 text-left">
                        <div className="col-9 card">
                          <div className="card-body d-flex justify-content-between align-items-center">
                            {name}
                            <span className="badge badge-primary badge-pill">{playlists[name].length} videos</span>
                          </div>
                        </div>
                        <div className="col-3">
                          <Link to={{pathname: routes.playlistDetails, state: { playlistName: name, playlist: playlists[name] }}} className="btn btn-outline-primary mt-3">View</Link>
                          <button className="btn btn-outline-danger mt-3 ml-3" onClick={this.deletePlaylist(name)}>Delete</button> {/* TODO: make this actually delete something */}
                        </div>
                      </div>
                      )
                  })
                }
              </div>
            </div>
          </div>
        </div>
      )
    }

  }
}


const mapStateToProps = (state) => {
  return {
    profile: state.firebase.profile,
    loggedIn: !!state.firebase.auth.uid,
    playlistsCollection: !!state.firestore.ordered.playlists && state.firestore.ordered.playlists[0],
    auth: state.firebase.auth,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    deletePlaylist: (playlistName) => dispatch(deletePlaylist(playlistName)),
  }
}


export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  firestoreConnect(props => [
    {collection: 'playlists', doc: props.auth.uid},
  ]),
)(PlaylistList)

这是代码，如果您也想看到redux动作，我可以产生它们，但是我可以告诉您，它们实际上是正确删除了字段。 firestoreConnect只是不了解这一点。

请让我知道我在想什么。我还会对代码进行一般性批评，让我知道我是否可以改进某些方面。

firestoreConnect不侦听文档上已删除的字段

0 个答案: