firestore document id will be undefined after I update array

问题

I have this flatlist wich recive data from firestore and send as props to projectsummery.js

const ProjectList =({projects})=> {
        return(
            <FlatList
                data={projects} 
                renderItem={(project,index)=>{
                    return(
                        <ProjectSummery project={project}  key={project.item.id}
                         //keyExtractor={(item, index) =>item.id}/>
                    )
            } }
            />  
        )
        }

Here I have a button which which send document id which is something like this {project.item.id} == CSmet3tRjpjDcJ437M78

ProjectSummery.js

    const  ProjectSummery =(props)=> {
          const {project,auth}=props      
          return(
            <>
            <View >
            <Text> {project.item.title} </Text>
            <Text>likes { project.item.likes.length}</Text>
            <Text>{project.item.id}</Text>//document id in in firestore
            <View>
              <Button title='like' onPress{()=>props.likesPosts(project.item.id)}/>
            </View>
            </View>
  const mapDispatchToProps=(dispatch)=>{
    return{
        likePosts:(postId)=>dispatch(likePosts(postId))
    }
}

When I try to update arrary in firebase the first time it work but the second time the document id will be undefined. I use React-Native. Thanks for help...

export  const likePosts =  (postId) => {

    return (dispatch,getState,{getFirebase,getFirestore})=>{
        const profile=getState().firebase.profile
        const authId=getState().firebase.auth.uid
        const firestore=getFirestore()

        firestore.collection('projects').doc(postId).update({
                                       //this postId will be be undefined in the 2nd time
             likes:firestore.FieldValue.arrayUnion({
                likedAt:new Date(),
                likedBy:authId,
                name: profile.firstName 
            })

        })
        }}

The fist update postId == CSmet3tRjpjDcJ437M78 in the 2nd time postId will be undefined

回答1:

What's happening is that when you click a like button the first time, it's working as expected so it gets the proper postId and then continues with the process you have defined. However, when you try the 2nd time it fails to fetch the postId as it's already liked.

The idea is that you'll need to either define an if statement and specify what should happen if it's already clicked and it get's clicked again (possibly storing the postId somewhere the first time and using it from there), or make an initial check that returns a specific message to the user if it's already clicked.

The issue has nothing to do with Firestore itself but with the button and the states of liked/unliked.

Here is one nice interactive example on codepen.io of a proper way of building like buttons using react. React Like Button

HTML

<div id="example"></div>

CSS

.btn-primary {
  background-color: #23aa4e;
  border-color: #177d37;
}

#example {
  margin: 3rem;
}

.customContainer {
  border: 1px solid black;
}

class LikeButton extends React.Component {
  constructor() {
    super();
    this.state = {
      liked: false
    };
    this.handleClick = this.handleClick.bind(this);
  } 

  handleClick() {
    this.setState({
      liked: !this.state.liked
    });
  }

  render() {
    const text = this.state.liked ? 'liked' : 'haven\'t liked';
    const label = this.state.liked ? 'Unlike' : 'Like'
    return (
      <div className="customContainer">
        <button className="btn btn-primary" onClick={this.handleClick}>
          {label}</button>
        <p>
          you {text} this. Click to toggle.
        </p>
      </div>
    );
  }
}

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
)

来源：https://stackoverflow.com/questions/59290513/firestore-document-id-will-be-undefined-after-i-update-array

标签

react-native

google-cloud-firestore