collectionRferece.doc()要求其第一个参数不是空字符串，但未定义? [英] collectionRferece.doc() required its first argument to be of not empty string but was undefined?

问题描述

我的标题问题也许重复了，但是，我认为它是不同的:D ..

my title question maybe duplicated but, I think its different :D..

我想更新Firestore中的数组...第一次工作，第二次将给我这个

I want to update array in firestore ... first time it work ,the second time will give me this

警告:虚拟列表:缺少项的密钥

并给我这个错误: collectionRferece.doc()要求其第一个参数不是空字符串，但未定义

我一步一步地解释了我的代码.

I explained my code step by step.

Home.js

我从firestore接收数据，并将其作为道具发送到projectList

I receive data from firestore and i send it as a prop to projectList

    render(){
        const {projects,auth}=this.props;
        return(

                <ProjectList projects={projects} />
        )
    }
}
const mapStateToProps=(state)=>{
    return{
        projects:state.firestore.ordered.projects,
    }
}
export default compose(connect(mapStateToProps),firestoreConnect([{collection:'projects',orderBy:['createdAt','desc']}])) (Feed);

ProjectList.js

只有一个简单的清单，并发送数据作为项目暑假的道具

there is just a flat list and sending data as a prop to projectsummery

const ProjectList =({projects})=> {
        return(

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

ProjectSummery.Js

有一些设计和按钮，当我按下按钮时，我将firestore中的(doc id)project.item.id发送到project actions.js，那里有likePosts函数，它更新了firestore中的数组

there is some design and button, when i press the button i send project.item.id which is a (doc id) in firestore to project actions.js there is likePosts function which is update the array in firestore

import {likePosts} from '../Store/Actions/ProjectActions'

const  ProjectSummery =(props)=> {
      const {project,auth}=props

       console.log(project.item.id);

      return(
        <>
            <Container style={{flex:0,height:180}} >
        <Content >
          <Card>
            <CardItem>
              <Left>
                <Button transparent onPress={()=>props.likePosts(project.item.id)}>
                  <Text>{project.item.likes.length} Likes</Text>
                </Button>
              </Left>

          </Card>
          </Content>
      </Container>

      </>
        )
    }

const mapDispatchToProps=(dispatch)=>{
    return{
        likePosts:(postId)=>dispatch(likePosts(postId))
    }
}

export default connect(null,mapDispatchToProps)(ProjectSummery);

Actions.js

在这里，我有likePosts功能来更新Firestore中的数组，第一次工作，但第二次(project.item.id)postId将不确定，我不知道这是怎么回事:D

here i have likePosts fuction which update the array in firestore, the fist time it works but the second time (project.item.id) postId will be undefined and i have no idea what's going on :D

export const likePosts =(postId)=>{

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

            console.log(postId);

            firestore.collection('projects').doc(postId).update({

            likes:firestore.FieldValue.arrayUnion({
            likedAt:new Date(),
            likedBy: authId,
            name: profile.firstName + profile.lastName

            })


        })  

        }}

推荐答案

以防万一有人最终遇到了类似问题的问题，这里有

Just in case anyone ends up on this question facing a similar issue, there is this SO question that appears to be different but the issue is caused by the same reason.

在此处检查我的答案以及问题本身下方的评论.

Check my answer there and the comments in under the question itself.

除此之外，您还可以检查

In addition to that, you can also check the Pagination section of this article for more guidance.

原始答案:

正在发生的事情是，当您第一次单击喜欢"按钮时，它会按预期工作，因此它将获得正确的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')
)

这篇关于collectionRferece.doc()要求其第一个参数不是空字符串，但未定义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！