如何遵循react/destructuring-assignment规则简洁提取state字段

需要从React组件state中提取userName、userRoles两个字段，组装为对象提交给API接口，最初功能正常的代码如下：

const userRoles = {
  userName: this.state.userName,
  roles: this.state.userRoles
};
putData('api/User/EditUserRoles', userRoles).then((result) => {
  const responseJson = result;
  if (responseJson) {
    this.setState({ msg: "User's roles updated successfully!" });
  }
});

开启ESLint的react/destructuring-assignment规则后，代码抛出两条校验报错，提示访问state的userName、userRoles属性时必须使用解构state赋值。
后续修改的版本虽然可以正常运行、通过校验，但引入了不必要的buffer临时变量，写法冗余：

const { userName, userRoles } = this.state;
const userNameBuffer = userName;
const userRolesBuffer = userRoles;
const userRolesArrayBuffer = {
  userName: userNameBuffer,
  roles: userRolesBuffer
};
putData('api/User/EditUserRoles', userRolesArrayBuffer).then((result) => {
  const responseJson = result;
  if (responseJson) {
    this.setState({ msg: "User's roles updated successfully!" });
  }
});

需要找到更简洁优雅的写法，在不使用多余buffer变量的前提下满足ESLint规则要求。

直接从this.state解构出需要的两个字段后，利用ES6对象属性简写语法组装请求参数即可，完全不需要额外的中转变量，既符合规则要求，可读性也最好：

// 仅在这一处访问this.state，通过解构拿到需要的字段，同时完成字段重命名匹配接口参数要求
const { userName, userRoles: roles } = this.state;
const submitData = { userName, roles };

putData('api/User/EditUserRoles', submitData).then((result) => {
  if (result) {
    this.setState({ msg: "User's roles updated successfully!" });
  }
});

如果需要极致精简，也可以用立即执行函数直接在解构时完成字段重命名和对象组装，不需要额外声明解构出来的零散变量：

const submitData = (({ userName, userRoles: roles }) => ({ userName, roles }))(this.state);
putData('api/User/EditUserRoles', submitData).then((result) => {
  if (result) {
    this.setState({ msg: "User's roles updated successfully!" });
  }
});

补充说明：之前加的buffer变量完全是多余的，解构赋值拿到的userName、userRoles本身就是独立的常量，可以直接使用，不需要再赋值给其他变量中转。另外原代码里const responseJson = result;也是冗余写法，接口返回的resolve结果可以直接判断使用，不需要额外赋值给同名变量。

内容的提问来源于stack exchange，提问作者0xC0FFEE