Javascript 反应不'；在ReactJS中单击按钮状态更改后重新渲染（预渲染）

我有下面的代码，这是工作，除了它不会重新呈现后，按下一个按钮的页面

我有两个不同的按钮显示取决于用户是否是房间的一部分。如果用户是房间的一部分，他们可以单击LEAVE，这将执行API调用。然后，我希望重新加载组件，并让按钮显示JOIN（因为它们不再是该房间的一部分）

按钮本身的功能是有效的，问题是我必须手动重新加载页面才能正确显示

我已经设置了一个虚拟状态，每当你按下按钮，它就会被执行，并且会正确地登录到控制台。 我的印象是，更改状态应该在React（或者在本例中是preact）中重新呈现组件

---

谢谢

在essense:您需要将已加入房间的状态存储在某个位置，并在用户每次加入或离开房间时更新该状态

我在这里做得太过火了，但是像这样的定制钩子很有意义：

//api调用
const fetchRooms=async userid=>{…}
const joinRoom=async（userId，roomId）=>{…}
const leaveRoom=async（userId，roomId）=>{…}
//定制挂钩
const useRooms=（userId）=>{
const[fetching，setFetching]=useState（true）；
const[error，setError]=useState（false）；
//首次使用此挂钩时，joinedRooms状态为空数组
//稍后将使用useEffect挂钩对其进行更新
//或通过下面的加入或离开功能
const[joinedRooms，setJoinedRooms]=useState（[]）；
//安装使用此挂钩的部件时
//或者用户id更改，请更新状态
useffect（（）=>{
让我们取消；
设置抓取（true）；
（异步（）=>{
试一试{
const rooms=等待获取房间（userId）；
取消| |设置连接的房间（房间）；
}捕捉（错误）{
取消| |设置错误（错误）；
}最后{
取消| |设置抓取（假）；
}
})();
return（）=>cancelled=true；
}，[userId]）；
const leave=async roomId=>{
试一试{
等待离开房间（userId，roomId）
//或者，您可以在此处再次获取所有用户室
setJoinedRooms（joined=>joined.filter（r=>r！==roomId））；
}捕捉（错误）{
//不能离开房间-你想对国家做什么？
}
}
const join=async roomId=>{
试一试{
等待joinRoom（用户ID、roomId）；
//或者，您可以在此处再次获取所有用户室
setJoinedRooms（joined=>[…joined，roomId]）；
}捕捉（错误）{
//无法加入房间-您想对该州做什么？
}
}
返回{
吸引人，
错误，
连接的房间，
离开
参加
}
}

在一个组件中，您可以这样使用它：

const JoinRoom = (roomId) => {
  fetch(`https://example.com/_matrix/client/r0/rooms/${roomId}/join`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${localStorage.getItem("mx_access_token")}`
    }
  });
}

export default JoinRoom;

constrooms=（用户ID，所有YourRoomID的列表）=>{
const{joinedRooms，fetching，error，join，leave}=useRooms（userId）；
//您将调用'join'和'leave'函数
//当用户想要加入或离开房间时，joinedRooms道具将获得
//根据更新，一切都将“正常工作”
返回所有YourRoomId.map的列表（roomId=>）
}

在essense:您需要将已加入房间的状态存储在某个位置，并在用户每次加入或离开房间时更新该状态

我在这里做得太过火了，但是像这样的定制钩子很有意义：

//api调用
const fetchRooms=async userid=>{…}
const joinRoom=async（userId，roomId）=>{…}
const leaveRoom=async（userId，roomId）=>{…}
//定制挂钩
const useRooms=（userId）=>{
const[fetching，setFetching]=useState（true）；
const[error，setError]=useState（false）；
//首次使用此挂钩时，joinedRooms状态为空数组
//稍后将使用useEffect挂钩对其进行更新
//或通过下面的加入或离开功能
const[joinedRooms，setJoinedRooms]=useState（[]）；
//安装使用此挂钩的部件时
//或者用户id更改，请更新状态
useffect（（）=>{
让我们取消；
设置抓取（true）；
（异步（）=>{
试一试{
const rooms=等待获取房间（userId）；
取消| |设置连接的房间（房间）；
}捕捉（错误）{
取消| |设置错误（错误）；
}最后{
取消| |设置抓取（假）；
}
})();
return（）=>cancelled=true；
}，[userId]）；
const leave=async roomId=>{
试一试{
等待离开房间（userId，roomId）
//或者，您可以在此处再次获取所有用户室
setJoinedRooms（joined=>joined.filter（r=>r！==roomId））；
}捕捉（错误）{
//不能离开房间-你想对国家做什么？
}
}
const join=async roomId=>{
试一试{
等待joinRoom（用户ID、roomId）；
//或者，您可以在此处再次获取所有用户室
setJoinedRooms（joined=>[…joined，roomId]）；
}捕捉（错误）{
//无法加入房间-您想对该州做什么？
}
}
返回{
吸引人，
错误，
连接的房间，
离开
参加
}
}

在一个组件中，您可以这样使用它：

const JoinRoom = (roomId) => {
  fetch(`https://example.com/_matrix/client/r0/rooms/${roomId}/join`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${localStorage.getItem("mx_access_token")}`
    }
  });
}

export default JoinRoom;

constrooms=（用户ID，所有YourRoomID的列表）=>{
const{joinedRooms，fetching，error，join，leave}=useRooms（userId）；
//您将调用'join'和'leave'函数
//当用户想要加入或离开房间时，joinedRooms道具将获得
//根据更新，一切都将“正常工作”
返回所有YourRoomId.map的列表（roomId=>）
}

这是因为

joinedRooms

没有更新。我看到您正在尝试进行（异步）API调用