Question

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

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

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

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

我逐步解释了我的代码。

Home.js

我从Firestore接收数据，并将其作为道具发送到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

只有一个平面清单，并发送数据作为对项目夏季的支持

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中的数组

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

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

            })


        })  

        }}

Answer 1

以防万一，最后有人遇到类似问题，this SO question似乎有所不同，但问题是由相同原因引起的。

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

除此之外，您还可以查看this article的分页部分以获取更多指导。

原始答案：

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

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（）要求其第一个参数不是空字符串，但未定义？

1 个答案: