从外部触发时无法更新 React 组件 state

Question

我对 React 比较陌生，还没有在网上找到解决方案。 我的代码：

const socketPlay = () => {
  socket.emit("playing", true);
}

const socketStop = () => {
  socket.emit("playing", false);
}

class App extends Component {
  state = {
    playing: false,
    url: 'XXXX',
  }
  
  handlePlay = () => {
    this.setState({ playing: true });
    socketPlay();
  }

  handlePause = () => {
    this.setState({ playing: false })
    socketStop();
  }

  ref = player => {
    this.player = player
  }

  render() {
    const { url, playing, controls, light, volume, muted, loop, played, loaded, duration, playbackRate, pip } = this.state
    const SEPARATOR = ' · '
    return (
      <ReactPlayer
        ref={this.ref}
        className='react-player'
        width='40%'
        playing={playing}
        onPlay={this.handlePlay}     
        onPause={this.handlePause}
      />
    )
  }
}
export default App;

const app = new App();

socket.on("toClient", (args) => {
  console.log("from server: " + args);
  switch (args) {
    case true:
      app.handlePlay();
      break;
    case false:
      app.handlePause();
      break;
    default:
      break;
  }
});

当我通过浏览器与组件交互时，handlePlay() 会正确设置 state“正在播放：true”。 如果它通过 app.handlePlay() 在组件外部被调用，则 state 保持“正在播放：假”。

app.handlePlay() 被正确执行。 只有 this.setState 不起作用。 浏览器控制台抛出“警告：无法在尚未安装的组件上调用 setState”。

非常感谢您的帮助。 在此先感谢，扬

Answer 1

查看您的代码，在我看来，使用componentDidMount在App Class 中添加socket.on("toClient", listener 会更容易

class App extends Component {
  state = {
    playing: false,
    url: 'XXXX',
  }
  componentDidMount(){ 
    socket.on("toClient", (args) => {
    console.log("from server: " + args);
    switch (args) {
    case true:
      this.handlePlay();
      break;
    case false:
      this.handlePause();
      break;
    default:
      break;
  }
});
}

  
  handlePlay = () => {
    this.setState({ playing: true });
    socketPlay();
  }

  handlePause = () => {
    this.setState({ playing: false })
    socketStop();
  }

  ref = player => {
    this.player = player
  }

  render() {
    const { url, playing, controls, light, volume, muted, loop, played, loaded, duration, playbackRate, pip } = this.state
    const SEPARATOR = ' · '
    return (
      <ReactPlayer
        ref={this.ref}
        className='react-player'
        width='40%'
        playing={playing}
        onPlay={this.handlePlay}     
        onPause={this.handlePause}
      />
    )
  }
}
export default App;