Question

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

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

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

>>> x = np.array([[0, 127, 127], [127, 255, 0], [255, 127, 0], [0, 0, 255]])
>>> x
array([[  0, 127, 127],
       [127, 255,   0],
       [255, 127,   0],
       [  0,   0, 255]])
>>> unique_vals, inverse = np.unique(x, return_inverse=True)
>>> inverse  # the inverse comes back flattened, so restore the shape
array([0, 1, 1, 1, 2, 0, 2, 1, 0, 0, 0, 2])
>>> inverse.reshape(x.shape)
array([[0, 1, 1],
       [1, 2, 0],
       [2, 1, 0],
       [0, 0, 2]])
>>> inverse.reshape(x.shape) / (len(unique_vals) - 1.)
array([[0. , 0.5, 0.5],
       [0.5, 1. , 0. ],
       [1. , 0.5, 0. ],
       [0. , 0. , 1. ]])

用于创建

的Project Reducer

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

项目行动

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

Answer 1

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

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

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

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

应该是

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

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

post方法调用后渲染组件

1 个答案: