组件元素重新呈现并复制，但在刷新时修复

Question

我正在创建一个可以显示项目的应用程序，该项目有一些子组件和用户创建新项目时正在运行的服务器端功能。这会导致道具发生更改，这会导致ProjectList刷新，这很好，但是当在数据库中显示一个并在刷新时显示一个时，它还会生成两个提交的项目。

Screenshot of duplicated project entry

After page refresh

刷新后可以正常工作，使我觉得与状态有关吗？

所以我有一个仪表板组件-> ProjectList-> ProjectListDetails

仪表板代码

    import React, { Component } from 'react'
import { connect } from 'react-redux'
import { firestoreConnect } from 'react-redux-firebase'
import ProjectList from '../Projects/ProjectList'
import { compose } from 'redux'
import CreateProject from '../Projects/CreateProject'
import { Redirect } from 'react-router-dom'

class Dashboard extends Component {



    render() {

        const {projects, auth, profile, organisations} = this.props;
        if (!auth.uid) return <Redirect to='/signin' />
        //is the logged in user an Organisation or Single account?
        const isOrg = profile.isOrg === true ? <p>Organisation Account</p> : <p>Single Account</p>;

        return (



            <div className="container">
            <div className="row home-header-row">
                <div className="col-md-12 section text-center">
                    {isOrg}
                    <br></br>

                    <CreateProject organisations={organisations}/>
                    <ProjectList projects={projects} authID={auth.uid} profile={profile}/>
                </div>

            </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        projects: state.firestore.ordered.projects,
        auth: state.firebase.auth,
        profile: state.firebase.profile,
        notifications: state.firestore.ordered.notifications,
        organisations: state.firestore.ordered.organisations
    }
}

export default compose(
connect(mapStateToProps),
firestoreConnect([
    { collection: 'projects', orderBy: ['totalEntries', 'desc'] },
    { collection: 'organisations', orderBy: ['time', 'desc'] },
    { collection: 'notifications', limit: 5, orderBy: ['time', 'desc']}
    ])
    )(Dashboard)

项目列表组件：

import React, { Component} from 'react'
import ProjectListDetails from './ProjectListDetails'

import 'firebase/firestore';

class ProjectList extends Component {

    // shouldComponentUpdate(nextProps, nextState) {
    //     return this.props.projects !== nextProps.projects;
    //   }


  render() {


    return(


        <div className="project-list section">

            {

                this.props.projects && this.props.projects.map(project => {

                const projectId = project.authorID + project.createdAt.toDate().toLocaleTimeString('it-it') + project.title


                return(

               <>


                    { project.canView.includes(this.props.profile.email) || project.authorEmail.includes(this.props.profile.email)  ?

                    <ProjectListDetails project={project} profile={this.props.profile} projectId={projectId}></ProjectListDetails>

                    : null}

                </>


                )
            })}
        </div>

    )
    }
}


export default ProjectList

ProjectListDetails组件

import React, { Component} from 'react'

import EditProject from './EditProjects'
import DeleteProject from './DeleteProject'
import {Link} from 'react-router-dom'
import ProjectSummary from './ProjectSummary'




class ProjectListDetails extends Component {



    render() {

        console.log('printing project : ' + this.props.project.title)

        return (
            <div className="row" key={this.props.project.id}>



            <div className="col-md-12"  key={this.props.project.projectID}>

            <button className="btn btn-secondary dropdown-toggle project-options" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Options
            </button>
            <div className="dropdown-menu" aria-labelledby="dropdownMenuButton" id={this.props.project.projectID}>
                <EditProject/>
                <DeleteProject />

            </div>

                <Link to={'/project/' + this.props.project.id} key={this.props.project.id} profile={this.props.profile} projectId={this.props.projectId}>
                <ProjectSummary projectId={this.props.projectId} project={this.props.project} key={this.props.project.id} authID={this.props.authID} />
                </Link>

            </div>

            </div>
        )
    }

}

export default ProjectListDetails

Answer 1

您的ProjectList组件在其中保留了先前的状态，当您添加新的Project时，firestore会为您提供项目列表，但是我认为您正在使用ProjectList组件中的array.push方法显示项目。可以共享ProjectList吗？组件？