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

Question

在 request payload 中创建新用户我正在发送 name, lastname, position, job, colorEye .以及如何做到这一点 job, colorEye ，它们是空字符串，是可选的。如 job, colorEye为空然后只发送 name, lastname, position .是否可以选择在请求有效负载中发送数据？如 this.state.eye空我发name, lastname, position, and job .当this.state.job空我发name, lastname, position and colorEye .当this.state.job和 this.state.colorEye都是空的，我发name, lastname, position .当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));