Как вернуть данные из другого файла ReactJS, который отправляется обратно с сервера с помощью socket.io

Question

Чтобы сделать мой проект немного опрятным, я поместил свои функции socket.io в другой файл ReactJs.Я пытаюсь вернуть данные из функции socket.io в моем файле socketIOClient в один из контейнеров моего приложения.

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)?

Container.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 });
  });
};

Container.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)
}

Container.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>
    );
  }
}