Javascript Can'；当从外部触发时，t更新反应组件状态

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

const socketPlay=（）=>{
socket.emit（“播放”，true）；
}
常数socketStop=（）=>{
socket.emit（“播放”，假）；
}
类应用程序扩展组件{
状态={
玩：错，
url:'XXXX'，
}
handlePlay=（）=>{
this.setState（{playing:true}）；
socketPlay（）；
}
handlePause=（）=>{
this.setState（{playing:false}）
socketStop（）；
}
ref=玩家=>{
this.player=player
}
render（）{
const{url，playing，controls，light，volume，muted，loop，played，loaded，duration，playbackRate，pip}=this.state
常量分隔符=“·”
返回(
)
}
}
导出默认应用程序；
const app=新app（）；
socket.on（“toClient”，（args）=>{
log（“来自服务器：+args”）；
开关（args）{
大小写正确：
app.handlePlay（）；
打破
案例错误：
app.handlePause（）；
打破
违约：
打破
}
});

当我通过浏览器handlePlay（）与组件交互时，会正确设置状态“播放：true”。如果通过app.handlePlay（）在组件外部调用它，则状态仍为“playing:false”

app.handlePlay（）正确执行。只有这个.setState不起作用。浏览器控制台抛出“警告：无法对尚未安装的组件调用setState”

非常感谢你的帮助。 提前感谢,，

---

Jan

查看您的代码，在我看来，将

套接字添加到
应用程序的
类中（“toClient”上，
侦听器与
componentDidMount

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;

类应用程序扩展组件{
状态={
玩：错，
url:'XXXX'，
}
componentDidMount（）{
socket.on（“toClient”，（args）=>{
log（“来自服务器：+args”）；
开关（args）{
大小写正确：
这个；
打破
案例错误：
这个。handlePause（）；
打破
违约：
打破
}
});
}
handlePlay=（）=>{
this.setState（{playing:true}）；
socketPlay（）；
}
handlePause=（）=>{
this.setState（{playing:false}）
socketStop（）；
}
ref=玩家=>{
this.player=player
}
render（）{
const{url，playing，controls，light，volume，muted，loop，played，loaded，duration，playbackRate，pip}=this.state
常量分隔符=“·”
返回(
)
}
}
导出默认应用程序；
谢谢，非常好用！
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;