我正在创建一个 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)))
}
}