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。我准备了一个小提琴，看看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创建新对象。

提琴：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));

Answer 2

我自己也找到了解决方案，这很简单：

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

    const newUser= {
      name,
      lastname,
      position,
      ...(job && { job: job }),
      ...(colorEye && { colorEye : colorEye })
    };


    this.addUser(newUser);
  }

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

2 个答案: