在每个发布请求中更新状态

拉特纳卜·库马尔·赖(Ratnabh Kumar Rai)

嘿,我在我的react redux项目中有一个表单,因此在提交表单后,我会调用一个操作,该操作会点击api将文档插入到mongodb中,所以我也想每次都更新状态,以便在我提交表单后立即获得状态更新,然后我在下面将它们呈现(作为对象数组)

Form.js

class Form extends Component {

  constructor(props) {
    super(props);
    this.state = {
      taskName: "",
      taskDescription: "",

    };
  }



  handleSubmit = () => {
    this.props.addTask(this.state);
  };
  render() {
    return (
      <div className="m-4">
        <div className="d-flex justify-content-between align-items-center">
          {" "}
          <h2 className=" ">Pomodoro Tasks</h2>
          <button className="btn btn-primary" onClick={()=>window.location.reload()}>Refresh</button>
        </div>
        <form>
        <div className="form-group ">
          <label>Task Name</label>
          <input
            type="text"
            className="form-control"
            onChange={(e) => this.setState({ taskName: e.target.value })}
          />
        </div>
        <div className="form-group">
          <label>Task Description</label>
          <input
            type="text"
            className="form-control"
            onChange={(e) => this.setState({ taskDescription: e.target.value })}
          />
        </div>


        </form>

        <button type="submit" className="btn btn-primary" onClick={(e) => this.handleSubmit(e)}>
          Submit
        </button>

       ////render here the state
      </div>
    );
  }
}
const mapStateToProps = (state) => {

  return state
};
export default connect(mapStateToProps, { addTask })(Form);

Actions.js

export const addTask = (details) => {
  return async (dispatch ,getState) =>{

    axios.post('/add_task', details)
      .then(function (response) {
        Swal.fire('Tasks Added !')
        dispatch({type:POSTDATA,payload:response.data})
      })
      .catch(function (error) {
        Swal.fire('Error in adding to database')
        console.log(error);
      });

  };
};

export const getTask = () => {
  return async (dispatch ,getState) =>{
    axios.get('/get_task')
      .then(function (response) {
        dispatch({type:GETDATA,payload:response.data})
      })
      .catch(function (error) {
        console.log(error);
      });
  };
};

reducer.js

const postPomodoro = (state = [], action) => {
  switch (action.type) {
    case POSTDATA:
      return action.payload; //well this is only returning one object that is inserted at that time i need to 
somehow get all the previous data too that are inserted in order to update state with all data and then render it.

    default:
      return state;
  }
};
const getPomodoro = (state = [], action) => {
  switch (action.type) {

    case GETDATA:
      return {...state,tasks:action.payload};
    default:
      return state;
  }
};

我在减速器中尝试过

 case POSTDATA:
      return {...state,task:action.payload};

但这也使我恢复了最近插入的数据,而不是以前插入的所有数据

Shubham Khatri

您需要合并状态中的数据,而不是覆盖它。在您的reducer中使用传播语法来实现此目标,如下所示

const postPomodoro = (state = [], action) => {
  switch (action.type) {
    case POSTDATA:
      return [...state, action.payload]; 

    default:
      return state;
  }
};

在reducer中更新状态后,可以使用connect和mapStateToProps在组件中访问它

const Comp = (props) => {
   // iterate over props.postTask and render
}
const mapStateProps = (state) => {
   return {
      postTask: state.postPomodoro
   }
}
export default connect(mapStateToProps)(Comp)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何正确更新表单,使用 axios 发布请求响应状态?

发出发布请求时,状态未正确更新

更新阵列Firebase中的每个用户状态

如何从vuex发布请求中的状态传递值

在nginx中的每个请求之后,Python对象都会丢失状态

如何在EWL中存储每个请求状态?

使用ajax发布请求后,不更新viewmodel中的实体

Woocommerce更新发布状态

获取数据库中每个用户的最新状态更新

在Redux状态下更新每个对象中的特定属性

在React中状态更新时动态更改获取请求的URL

在 Vue 2 中的 axios 请求后更新关注状态

尽管状态已更新,但在React中使用axios发布请求后,DOM没有更新

角度,从发布请求获取状态代码值

发布请求失败的api状态代码

如何使用axios在发布请求中传递ReactJS状态数据时解决问题?

在 HTTP GET 请求(状态=已保存&状态=已发布)中多次发送单个参数名称的最佳做法是什么?

在每个GET请求上重复Redux状态

对Web服务器日志中每个URI的请求和状态代码进行计数

Keycloak Spring适配器-检查每个HTTP请求中authToken是否处于活动状态

从ObservableObject发布者更新状态

AXIO中的GraphQL发布请求

字符长度中包含Twitter发布到状态/更新URL的信息

ajax发布请求中的Ajax GET请求?

如何循环运行http put请求并获取每个请求的状态

更新数组后执行发布请求

Symfony使用发布请求更新数据

在角度2中通过发布请求进行编辑后如何获取更新的数据

一个更改时如何更新每个映射的组件中的组件状态