0

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

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

项目 //我在哪里渲染项目

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

用于创建的 Project Reducer

function projectReducer(state={}, action) {
    switch(action.type){
        case projectActions.GET_PROJECT:
        {
            return {project:action.payload.data}
        }
        case projectActions.CREATE_PROJECT:
        {
            return {...state, project:action.payload.data}
        }
        default:
        {
            return state;
        }
    }
}

export default projectReducer

项目行动

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)))
}
}
4

1 回答 1

1
this.state={
        showForm:false,
        projects:this.props.projects
}

那是你的问题。您正在分配组件何时安装this.props.projectsthis.state.projects这只会在挂载时发生一次,并且不会更新。

如果您只是想将数据从道具传递给孩子,您可以这样做;

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

应该改为

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

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

于 2018-01-24T21:39:57.243 回答