Question

我正在创建我的大学项目。某种使用ReactJS作为前端的跟踪器，我不想在我想要的任何类中使用全局变量。该变量将负责屏幕上显示的内容。假设有10个用户。首先，在使用按钮后，变量增加，我正在发送具有其他ID和下一个用户负载的Web请求。有什么办法可以拥有这样的变量？我可以这样使用“ globalID”吗？我想一步一步走。现在，我只想拥有这样的全局变量。我稍后再考虑渲染和Web请求。

直到现在，我都尝试从App进行扩展，因此我可以使用此状态值。仍然没有任何效果。 Idk，也许有解决方法。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      globalID: "",
      ...
    };
  }

  ...
}

class Proteges extends App {
  constructor(props) {
    super(props);
    this.state = {
      ...
      userResponse: []
    };
    ...
  }

  ...

  getUserByID() {
    fetch(`http://localhost:9000/proteges/${HERE I WANT TO USE globalID}`)
      .then(res => res.json())
      .then(res => this.setState({ userResponse: res }))
      .catch(err => err);
  }

  ...

  componentDidMount() {
    ...
    this.getUserByID();
  }

  increaseID() {
        // FUNCTION TO INCREASE ID
        console.log(...)
  }

  decreaseID() {
        // FUNCTION TO DECREASE ID
        console.log(...)
  }
 ...

  render() {
    return (
      <div id="proteges">
        <div>
          <span>
          <!-- THIS BUTTON SHOULD DECREASE globalID by 1 and reload #proteges div -->
            <Button 
            variant="success" 
            size="md" 
            onClick={this.increaseID} 
            active>
              <strong> &laquo; </strong>                        
            </Button>
          </span>
          ...
          <span>
          <!-- THIS BUTTON SHOULD INCREASE globalID by 1 and reload #proteges div -->
            <Button 
            variant="success" 
            size="md" 
            onClick={this.decreaseID} 
            active>
              <strong> &raquo; </strong>                        
            </Button>
          </span>
        </div>
        ...
    );
  }
}

...

export default App;
```

Answer 1

您可以尝试使用window.globalID = '<id_here>'和/或localStorage.setItem('GlobalID', '<id_here>')和localStorage.getItem('GlobalID')。

使用其他类的状态

1 个答案: