更新数组后，firestore 文档 ID 将未定义答案

【问题标题】：firestore document id will be undefined after I update array更新数组后，firestore 文档 ID 将未定义
【发布时间】：2019-12-11 16:49:56
【问题描述】：

我有这个平面列表，它从 firestore 接收数据并作为道具发送到 projectssummery.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

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 中更新数组时，它会起作用，但第二次文档 ID 将未定义。我使用 React-Native。感谢您的帮助...

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

第2次更新postId == CSmet3tRjpjDcJ437M78 postId 将undefined

【问题讨论】：

我已尝试复制您正在执行的操作，但没有出现任何问题。似乎任何方法给你 postId 都是问题。你能分享一下声明 postId 的代码吗？
感谢重播...我之前问过但没有人回答我，我在这里解释了我的代码：stackoverflow.com/questions/59272043/…
我看到你有 console.log(postId)。您能否编辑上面的问题并添加那部分代码+您在第一次更新和第二次更新中获得的日志？这将帮助我消除出现问题的可能性。 @艾哈迈德
@Waelmas 我编辑了。你能再读一遍吗谢谢。

标签： react-native google-cloud-firestore

【解决方案1】：

发生的情况是，当您第一次单击“赞”按钮时，它会按预期工作，因此它会获取正确的 postId，然后继续执行您定义的流程。但是，当您第二次尝试时，它无法获取 postId，因为它已经被喜欢了。

这个想法是，您需要定义一个 if 语句并指定如果它已经被点击并且再次被点击（可能是第一次将 postId 存储在某个地方并从那里使用它）应该发生什么，或者创建一个初始检查，如果已单击，则将特定消息返回给用户。

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

这是 codepen.io 上一个很好的交互式示例，说明了使用 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')
)

【讨论】：