React使用WebSocket时报Must use destructuring state assignment错误如何解决

报错触发原因 #

该错误是ESLint规则react/destructuring-assignment的校验结果，规则要求访问this.state内的属性时必须使用解构赋值的方式提取属性，禁止直接通过this.state.xxx的语法读取属性。

三处报错位置修复 #

1. 第32行（ws.onopen回调内） #

先从state中解构出userCredientials再使用：

ws.onopen = () => {
  const { userCredientials } = this.state;
  console.log('main组件WebSocket连接成功');
  console.log(this.state);
  ws.send(JSON.stringify(userCredientials));
};

2. 第43行（ws.onmessage回调内） #

此处同时存在setState异步调用后直接读state的旧值问题，修复如下：

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  const userHashCode = data.hashCodeOfUser;
  this.setState({ userHashCode });
  if (userHashCode) {
    this.setState({
      mess: `Name: ${data.name} date: ${data.date} HashCode: ${userHashCode} Message: ${data.msg}`,
    });
  } else {
    this.setState({
      mess: `Name: ${data.name} Message: ${data.msg}`,
    });
  }
};

3. 第72行（render方法内） #

先从state中解构出mess再渲染：

render() {
  const { mess } = this.state;
  return (
    <div>
      <p>{mess}</p>
    </div>
  );
}

额外隐藏问题修复 #

你代码中的check函数读取this.state.ws，但你创建的WebSocket实例仅作为connect函数的局部变量存在，并未存入state，会导致连接状态校验永远失效，修复方式：
在connect函数中创建WebSocket实例后，将实例存入state：

connect = () => {
  const ws = new WebSocket('ws://127.0.0.1:5678/');
  this.setState({ ws });
  // 后续原有逻辑不变
}

可选：关闭校验规则 #

如果不需要遵守该编码规范，可以在项目的ESLint配置文件中添加规则关闭配置：

{
  "rules": {
    "react/destructuring-assignment": "off"
  }
}

完整修改后代码 #

import React, { Component } from 'react';

export class MainPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userCredientials: {
        type: 'credentials',
        name: 'vinay',
        email: 'vinay3245@gmail.com',
      },
      mess: '',
      userHashCode: '',
      ws: null
    };
  }

  componentDidMount() {
    this.connect();
  }

  /**
   * @function connect
   * 该函数用于建立WebSocket连接，连接断开后会自动尝试重连
   */
  connect = () => {
    const ws = new WebSocket('ws://127.0.0.1:5678/');
    this.setState({ ws });
    // websocket onopen事件监听
    ws.onopen = () => {
      const { userCredientials } = this.state;
      console.log('main组件WebSocket连接成功');
      console.log(this.state);
      ws.send(JSON.stringify(userCredientials));
    };

    // websocket onclose事件监听
    ws.onclose = () => {
      console.log('连接已关闭');
    };

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      const userHashCode = data.hashCodeOfUser;
      this.setState({ userHashCode });
      if (userHashCode) {
        this.setState({
          mess: `Name: ${data.name} date: ${data.date} HashCode: ${userHashCode} Message: ${data.msg}`,
        });
      } else {
        this.setState({
          mess: `Name: ${data.name} Message: ${data.msg}`,
        });
      }
    };

    // websocket onerror事件监听
    ws.onerror = (err) => {
      console.error('Socket报错: ', err.message, '正在关闭socket');
      ws.close();
    };
  };

  /**
   * @function check 检查连接状态，若连接已关闭则触发重连逻辑
   */
  check = () => {
    const { ws } = this.state;
    if (!ws || ws.readyState === WebSocket.CLOSED) this.connect(); // 检查websocket实例是否关闭，若关闭则调用connect重连
  };

  render() {
    const { mess } = this.state;
    return (
      <div>
        <p>{mess}</p>
      </div>
    );
  }
}

export default MainPage;

内容的提问来源于stack exchange，提问作者Vinay Kumar