获取请求被调用了两次？

Question

查看其他帖子后，我没有找到我的问题的确切答案，但显然这个问题发生在其他人身上，而不是我的问题。从下面的函数发送的每个 PUT、POST、DELETE 请求都会被调用两次。这是我的函数代码，用于处理用户对 UI 的更改（添加、更新、删除）。它是 ReactJS class 组件

的一部分

  commitChanges({ added, changed, deleted }) {
    this.setState((state) => {
      let { data } = state;
      if (added) {
        const startingAddedId =  data!=undefined && data.length > 0  ? data[data.length - 1].id + 1 : 0;
        var TBname= decodeURIComponent(window.location.pathname.slice(window.location.pathname.lastIndexOf(':')+1 ));
        if ( data == undefined) data = [{ id: startingAddedId, ...added} ];
        data = [...data, { id: startingAddedId, ...added }];
        fetch('http://localhost:3001/api/appo',
         {
         method: 'POST',
         headers: { 'Accept': 'application/json, text/plain, */*' ,'Content-Type': 'application/json' }, 
         body: JSON.stringify({ id: startingAddedId,"TBname": TBname, ...added } )
        }) 
        .then( (response) => this.setState({ data: data }) ) .catch(() => console.log('POST failed'));
        this.setState({ data: data })
        console.log(this.state.data);
      }
      if (changed) {
         data.map((appointment) => {
          console.log(changed[appointment._id]);
          if (changed[appointment.id] != undefined) {
            //console.log("JSON",JSON.stringify({...appointment,...changed[appointment.id],} ) );
            fetch('http://localhost:3001/api/appo/'+appointment.id,
            {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' }, 
            body: JSON.stringify({...appointment,...changed[appointment.id],} )
           }).catch(() => console.log('PUT failed'));
           
          }
         });          
        data = data.map((appointment) => 
            changed[appointment.id] ? { ...appointment, ...changed[appointment.id] } : appointment)
        this.setState({ data:  data });

      }
      if (deleted !== undefined) {
        console.log(deleted);
        fetch('http://localhost:3001/api/appo/'+deleted,
            {
            method: 'DELETE',
            headers: { 'Content-Type': 'application/json' }, 
           }).catch(() => console.log('DELETE failed'));
           data = data.filter(appointment => appointment.id !== deleted);
           this.setState({ data: data })
          }
      return { data };
    });
  }

例如，如果我想发送 POST 创建项目的请求，该项目将使用相同的 ID 创建两次。

Double POST REQUEST

Answer 1

不要在 setState 回调函数内发出任何 http 请求，这不是一个好习惯，在状态回调函数内设置状态会导致此问题。

删除 setState 回调并执行如下操作将解决您的问题。

 commitChanges({ added, changed, deleted }) {
  let { data } = state;
  if (added) {
    const startingAddedId =  data!=undefined && data.length > 0  ? data[data.length - 1].id + 1 : 0;
    var TBname= decodeURIComponent(window.location.pathname.slice(window.location.pathname.lastIndexOf(':')+1 ));
    if ( data == undefined) data = [{ id: startingAddedId, ...added} ];
    data = [...data, { id: startingAddedId, ...added }];
    fetch('http://localhost:3001/api/appo',
     {
     method: 'POST',
     headers: { 'Accept': 'application/json, text/plain, */*' ,'Content-Type': 'application/json' }, 
     body: JSON.stringify({ id: startingAddedId,"TBname": TBname, ...added } )
    }) 
    .then( (response) => this.setState({ data: data }) ) .catch(() => console.log('POST failed'));
    this.setState({ data: data })
    console.log(this.state.data);
  }
  if (changed) {
     data.map((appointment) => {
      console.log(changed[appointment._id]);
      if (changed[appointment.id] != undefined) {
        //console.log("JSON",JSON.stringify({...appointment,...changed[appointment.id],} ) );
        fetch('http://localhost:3001/api/appo/'+appointment.id,
        {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' }, 
        body: JSON.stringify({...appointment,...changed[appointment.id],} )
       }).catch(() => console.log('PUT failed'));
       
      }
     });          
    data = data.map((appointment) => 
        changed[appointment.id] ? { ...appointment, ...changed[appointment.id] } : appointment)
    this.setState({ data:  data });

  }
  if (deleted !== undefined) {
    console.log(deleted);
    fetch('http://localhost:3001/api/appo/'+deleted,
        {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' }, 
       }).catch(() => console.log('DELETE failed'));
       data = data.filter(appointment => appointment.id !== deleted);
       this.setState({ data: data })
      }
 }

获取请求被调用了两次？

fetch request is called twice?

api

fetch

node.js

reactjs