Reactjs post方法调用后呈现组件

我正在创建一个mern应用程序，我可以在其中显示、创建、编辑和删除express API中的项目

到目前为止，我可以获得要显示的数据，但当我尝试创建新项目时，数据不会显示，也不会呈现。post方法发送OK 200响应，并在redux logger中显示数据，但不在组件中显示数据，直到我参考页面，然后新项目与以前的其他项目一起显示，我想知道如何在项目组件中呈现新项目

Projects//我渲染项目的位置

class Projects extends React.Component{
  constructor(props){
        super(props)
    this.state={
                showForm:false,
                projects:this.props.projects
              }

              this.showCreateProjectForm=this.showCreateProjectForm.bind(this)


    }


showCreateProjectForm(){
    this.setState({showForm:!this.state.showForm})
  }

  render() {
    return(
        <div>
      <Button name="create project" 
              title="Create A Project"
              onClickAction={this.showCreateProjectForm} />
              {this.state.showForm && <ProjectForm {...this.props} /> }

              {this.state.projects.map((el,key)=>  
                          <Project key={key} {...this.props} project={el} />)}

            </div>
      )
  }
}
export default Projects

项目行动

export function getProject(){
return (dispatch, getState) => {
      return Project.readProject()
                        .then((response)=> {dispatch(getProjectAction(response))})
                        .catch((error)=>dispatch(getError(error)))
}
}


export function createProject(p){
return (disp, getState) => {
      return Project.createProject(p)
                        .then(response=> {disp(createProjectAction(response))})
                        .catch((error)=>disp(getError(error)))
}
}

那是你的问题。安装组件时，您正在将this.props.projects分配给this.state.projects。这只在装载时发生一次，不会更新

如果你只是想把数据从道具传递给孩子，你可以这样做

{this.state.projects.map((el,key)=>  

应该是

{this.props.projects.map((el,key)=>  

---

而且不再需要在构造函数中将项目设置为状态。

更新：我刚刚尝试过，现在它只显示新创建的项目，并删除其余的现有项目。我希望新的项目被添加到现有的项目，而不是取代他们，这就是你的减速机正在做的事情。如果要添加到现有的一段状态，则需要在该数组上执行.push操作，而不是使用新数据覆盖该数组，从而删除旧数据。是否应在reducer中推送数组上的数据？reducer是进行此类数据操作的正确位置。我已尝试将项作为{…state，project:[…state.project，action.payload.data]}它成功了。它将组件添加到其他现有项目中，但项目的名称/描述没有显示，因为现在它是数组中的一个数组。有什么提示吗？

{this.state.projects.map((el,key)=>  

{this.props.projects.map((el,key)=>