时间戳

首页 > 解决方案 > 更新数组后，firestore 文档 ID 将未定义

react-native - 更新数组后，firestore 文档 ID 将未定义

问题描述

我有这个平面列表，它从 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

标签： react-nativegoogle-cloud-firestore

解决方案

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

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

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

这是codepen.io上一个很好的交互式示例，它是使用 react 构建类似按钮的正确方法。反应喜欢按钮

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

推荐阅读