this.set状态设置某些值，但不设置其他值

Question

当我console.log(data，this.state.guestCanPause，this.state.isHost(时，this.isHost的值从数据中更改为正确的值，但this.guestCanPauses没有从数据中获取正确的值。我打印出了数据，并验证了数据中的值是否正确。

import React, { Component } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { Grid, Button, Typography } from "@material-ui/core";
function withHook(Component) {
return function WrappedComponent(props) {
const params = useParams();
const navigate = useNavigate();
return <Room {...props} roomCode={params.roomCode} {...{ navigate }} />;
};
}
class Room extends Component {
constructor(props) {
super(props);
this.state = {
votesToSkip: 2,
guestsCanPause: false,
isHost: false,
};
this.roomCode = props.roomCode;
this.getRoomDetails(this.roomCode);
this.leaveButtonPressed = this.leaveButtonPressed.bind(this);
}
getRoomDetails() {
fetch("/api/get-room" + "?code=" + this.roomCode)
.then((response) => response.json())
.then((data) => {
this.setState({
votesToSkip: data.votes_to_skip,
guestCanPause: data.guest_can_pause,
isHost: data.is_host,
}),
console.log(data);
});
}
leaveButtonPressed() {
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
};
fetch("/api/leave-room", requestOptions).then((_response) => {
// this.props.leaveRoomCallback();
this.props.navigate("/");
});
}
}
export default withHook(Room);

Answer 1

您有一个拼写错误，在一个地方是：guestsCanPause，但您设置的状态键与之不匹配，而是guestCanPause。