我更新数组后，firestore文档ID将是未定义的 [英] firestore document id will be undefined after I update array

问题描述

我有这个平面清单，其中包含来自Firestore的接收数据并将其作为道具发送到projectsummery.js

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}/>
                    )
            } }
            />  
        )
        }

在这里，我有一个按钮，该按钮发送文档ID，就像这样{project.item.id} == CSmet3tRjpjDcJ437M78

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))
    }
}

当我第一次尝试更新Firebase中的arrary时，但是第二次文档ID将不确定.我使用React-Native.感谢您的帮助...

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 
            })

        })
        }}

第二次更新postId时，第一个更新postId == CSmet3tRjpjDcJ437M78 将是未定义

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

推荐答案

正在发生的事情是，当您第一次单击赞"按钮时，它会按预期工作，因此它将获得正确的postId，然后继续您定义的过程.但是，当您第二次尝试时，由于已被喜欢而无法获取postId.

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.

这个想法是，您需要定义一个if语句，并指定如果已经单击并再次单击它(应该将postId第一次存储在某处并从那里使用)会发生什么情况，或者初始检查，如果已单击，则会向用户返回特定消息.

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.

该问题与Firestore本身无关，而与按钮和喜欢/不喜欢的状态有关.

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

这是 codepen.io 上的一个很好的交互式示例，说明了使用react构建类似按钮的正确方法.像按钮一样反应

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;
}

JS

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')
)

这篇关于我更新数组后，firestore文档ID将是未定义的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！