Javascript 无效的钩子调用，我可以'；我好像没办法

标题差不多说明了这一点，我看过一些例子，但没有一个修复对我真正有效。我知道这是常量，在类内移动，在导出中移动，没有运气。似乎无法让它工作。有人有什么想法吗？多谢各位

我在下面的

const[ws，setWs]=useState（）行中得到了错误

错误：钩子调用无效。钩子只能在函数组件的主体内部调用。发生这种情况的原因如下：

React和渲染器的版本可能不匹配（例如React DOM）
你可能违反了钩子的规则
同一应用程序中可能有多份React“

导出默认函数PlayerHoc（ComposedComponent）{
const[ws，setWs]=useState（）；
const[roomIp，setRoomIp]=useState（）；
useffect（（）=>{
常量wsUrl=
process.env.NODE_env==“开发”
？“ws://localhost:8888”
：“ws://”+roomIp；
setWs（新WebSocket（wsUrl））；
}，[roomIp]）；
useffect（（）=>{
如果（！ws）返回；
ws.onopen=（）=>{
ws.send（“播放请求”）；
};
}，[ws]）；
类PlayerHoc扩展组件{
应更新组件（下一步）{
返回nextrops.playing | |（this.props.playing&！nextrops.playing）；
}
componentDidUpdate（prevProps）{
if（prevProps.currentSong.id！==this.props.currentSong.id）{
const id=this.props.currentSong.id；
const other=this.props.currentSong.linked\u from
？this.props.currentSong.linked_from.id
：null；
this.props.containsCurrentSong（other？`{id}，${other}`:id）；
}
}
渲染=（）=>(
this.props.playSong（上下文，偏移量）}
playSong={（）=>this.props.playSong（）}
{…setRoomIp（this.props.roomIp）}
/>
);
}
//测试虫
常量mapStateToProps=状态=>{
返回{
当前歌曲：state.playerReducer.status
？state.playerReducer.status.track\u window.current\u track
: {},
包含：state.libraryReducer.containsCurrent？true:false，
轨迹位置：state.playerReducer.status
？state.playerReducer.status.position
: 0,
播放：state.playerReducer.status
？！state.playerReducer.status.paused
：错
};
};
函数nextSong（跳过）{
send（JSON.stringify（{type:“skipSong”，data:skip}））
}
函数previousSong（prev）{
send（JSON.stringify（{type:“previousSong”，data:prev}））
}
功能暂停（暂停）{
send（JSON.stringify（{type:“pauseSong”，data:pause}））
}
功能播放歌曲（播放）{
send（JSON.stringify（{type:“playSong”，data:play}））
}
函数seekSong（seek）{
send（JSON.stringify（{type:“seekSong”，data:seek}））
}
const mapDispatchToProps=调度=>{
返回bindActionCreators(
{
下松，
上一首歌，
暂停，
playSong，
seekSong，
},
派遣
);
};
返回连接（mapStateToProps、mapDispatchToProps）（PlayerHoc）；
}
嗯，这真是一团糟。但是，让我们尝试将其重构为一个工作的高阶组件

这里有几个问题，但主要是：


在功能组件内部定义类组件
挂钩使用不当

让我们从定义一个普通的高阶组件开始。让我们称之为withPlayer

withPlayer将返回一个类组件

在这个类组件中，我们可以创建websocket，并构建所有播放器控件

然后我们可以将这些玩家控件作为道具传递给包装好的组件

最后，我们的默认导出将应用我们的redux connect HOC。我们可以使用redux中的compose函数，用player进行组合，并连接到包装好的组件上

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从'redux'导入{compose}；
带播放器的函数（WrappedComponent）{
返回类扩展组件{
建造师（道具）{
超级（道具）；
常量wsUrl=
process.env.NODE_env=='development'？'ws://localhost:8888'：'ws://'+props.roomIp；
this.ws=新WebSocket（wsUrl）；
}
应更新组件（下一步）{
返回nextrops.playing | |（this.props.playing&！nextrops.playing）；
}
componentDidUpdate（prevProps）{
if（prevProps.currentSong.id！==this.props.currentSong.id）{
const id=this.props.currentSong.id；
const other=this.props.currentSong.linked\u from
？this.props.currentSong.linked_from.id
：null；
this.props.containsCurrentSong（other？`{id}，${other}`:id）；
}
}
下声=（跳过）=>{
this.ws.send（JSON.stringify（{type:'skipSong'，data:skip}））；
};
上一首歌=（上一首）=>{
this.ws.send（JSON.stringify（{type:'previousSong'，data:prev}））；
};
暂停声=（暂停）=>{
this.ws.send（JSON.stringify（{type:'pauseSong'，data:pause}））；
};
播放歌曲=（播放）=>{
this.ws.send（JSON.stringify（{type:'playSong'，data:play}））；
};
搜索歌曲=（搜索）=>{
send（JSON.stringify（{type:'seekSong'，data:seek}））；
};
render（）{
返回(
this.playSong（上下文，偏移量）}
nextSong={this.nextSong}
previousSong={this.previousSong}
pauseSong={this.pauseSong}
playSong={this.playSong}
seekSong={this.seekSong}
/>
);
}
};
}
常量mapStateToProps=（状态）=>{
返回{
当前歌曲：state.playerReducer.status
？state.playerReducer.status.track\u window.current\u track
: {},
包含：state.libraryReducer.containsCurrent？true:false，
trackPosition:state.playerReducer.status？state.playerReducer.status.position:0，
播放：state.p