如何从另一个使用 socket.io 从服务器发回的 ReactJS 文件返回数据

Question

为了使我的项目更整洁，我将我的 socket.io 函数放在另一个 ReactJs 文件中。我正在尝试将数据从我的 socketIOClient 文件中的 socket.io 函数返回到我的应用程序容器之一。

SocketIOClient.js

import io from 'socket.io-client'

const socket = io.connect(`${process.env.REACT_APP_SERVER_URL}`)  

export const studentFunction = (studentID) => {
  socket.emit('getStudentDetails', {studentID})

  socket.on('returnedStudentDetails', data => {
    return data    //obviously this is not working
  })
}

如何从 studentFunction(1) 返回数据？

容器.js

render(){
let studentDetails = studentFunction(1)
console.log(studentDetails)

  return(
     .......
  )
}

Answer 1

您的套接字响应是基于回调的。所以有两种方法可以解决这个问题。要么承诺你的回调，要么从组件传入一个回调（函数），该组件将使用新数据设置状态。我将解释下面的两种方法

承诺方法

SocketIOClient.js

import io from 'socket.io-client'

const socket = io.connect(`${process.env.REACT_APP_SERVER_URL}`)

export const studentFunction = (studentID) => {
  return new Promise((resolve) => {
    socket.on('returnedStudentDetails', data => {
      resolve(data);
    });
    socket.emit('getStudentDetails', { studentID });
  });
};

容器.js

import { studentFunction } from 'SocketIOClient';
export default class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      studentDetails: '',
    }
  }

  componentDidMount() {
    const studentDetails = await studentFunction(1);
    this.setState({ studentDetails });
  }

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

---

回调方法

SocketIOClient.js

import io from 'socket.io-client'

const socket = io.connect(`${process.env.REACT_APP_SERVER_URL}`)

export const studentFunction = (studentID, callback) => {
  socket.emit('getStudentDetails', { studentID })

  socket.on('returnedStudentDetails', callback)
}

容器.js

import { studentFunction } from 'SocketIOClient';
export default class Container extends Component {
  constructor(props) {
    super(props);
    this.state = {
      studentDetails: '',
    }
    studentFunction(1, this.onLoadStudentData);
  }

  onLoadStudentData = (studentDetails) => this.setState({ studentDetails })

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