javascript - 请求有效负载 - 可选的数据发送

Question

在请求负载中创建新用户，我正在发送姓名、姓氏、职位、工作、colorEye。如何完成这项工作 colorEye(空字符串)是可选的。如果job、colorEye为空，则仅发送name、lastname、position。是否可以选择在请求负载中发送数据？如果 this.state.eye 为空，我会发送姓名、姓氏、职位和工作。当 this.state.job 为空时，我发送姓名、姓氏、职位和 colorEye。当 this.state.job 和 this.state.colorEye 为空时，我发送姓名、姓氏、职位。当 this.state.job 和 this.state.colorEye 具有值时，我发送 name、lastname、position、job、colorEye。

像这样做:

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      lastname: 'aaaaa',
      position: 'bbbbb',
      job: '',
      colorEye: ''
    };
  }

  createNewUser = () => {
    const {
      name,
      lastname,
      position,
      job,
      colorEye
    } = this.state;

    const newUser = {};

    if(job && colorEye) {
        const newUser= {
          name,
          lastname,
          position,
          job,
          colorEye
        };
    } else if(job) {
        const newUser= {
          name,
          lastname,
          position,
          job
        };
   } else if(colorEye) {
        const newUser= {
          name,
          lastname,
          position,
          colorEye
        };
   }

    this.addUser(newUser);
  }


  addUser = newUser=> {
    const url = 'api/v1/users';

    axios({
      method: 'post',
      url,
      data: newUser,
      params
    })
      .then(res => {

      })
      .catch(error => {

      });
  };

  render() {
    return (
      <div>

      </div>
    );
  }
}

Answer 1

首先考虑在服务器上解决这个问题。

否则您可以使用delete operator 。我准备了一个fiddle，看https://jsfiddle.net/jdwkLctr/

function getClearedUser(user) {
  const clearedUser = Object.assign({}, user);

  if (clearedUser.job === "") {
      delete clearedUser.job;
  }

  if (clearedUser.colorEye === "") {
    delete clearedUser.colorEye;
  }

  return clearedUser;
}

const user = {
  name: 'Saveli',
  lastname: 'Tomac',
  position: 'JavaScript Developer',
  job: 'The best company in the world',
  colorEye: 'brown'
};

const userWithoutJob = {
  name: 'Saveli',
  lastname: 'Tomac',
  position: 'JavaScript Developer',
  job: '',
  colorEye: 'brown'
};

const userWithoutEyeColor = {
  name: 'Saveli',
  lastname: 'Tomac',
  position: 'JavaScript Developer',
  job: 'The best company in the world',
  colorEye: ''
};

const userWithoutEverything = {
  name: 'Saveli',
  lastname: 'Tomac',
  position: 'JavaScript Developer',
  job: '',
  colorEye: ''
};

console.log("User:", getClearedUser(user));
console.log("User without job:", getClearedUser(userWithoutJob));
console.log("User without eye color:", getClearedUser(userWithoutEyeColor));
console.log("User without everything:", getClearedUser(userWithoutEverything));

此外，您还可以过滤 Object.entries使用自定义函数并使用 Object.fromEntries 创建新对象.

fiddle :https://jsfiddle.net/3zta4dmx/

function getClearedUser(user) {
  return Object.fromEntries(
    Object.entries(user).filter(([key, value]) => {
      if (key === "name" || key === "lastname" || key === "position") {
        return true;
      }

      return value !== "";
    })
  );
}

const user = {
  name: 'Saveli',
  lastname: 'Tomac',
  position: 'JavaScript Developer',
  job: 'The best company in the world',
  colorEye: 'brown'
};

const userWithoutJob = {
  name: 'Saveli',
  lastname: 'Tomac',
  position: 'JavaScript Developer',
  job: '',
  colorEye: 'brown'
};

const userWithoutEyeColor = {
  name: 'Saveli',
  lastname: 'Tomac',
  position: 'JavaScript Developer',
  job: 'The best company in the world',
  colorEye: ''
};

const userWithoutEverything = {
  name: 'Saveli',
  lastname: 'Tomac',
  position: 'JavaScript Developer',
  job: '',
  colorEye: ''
};

console.log("User:", getClearedUser(user));
console.log("User without job:", getClearedUser(userWithoutJob));
console.log("User without eye color:", getClearedUser(userWithoutEyeColor));
console.log("User without everything:", getClearedUser(userWithoutEverything));