Question

我有这个平面清单，其中包含来自Firestore的接收数据并将其作为道具发送到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

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。感谢您的帮助...

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 未定义

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

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将不确定

1 个答案: