Question

我是React的新手，但我决心解决这个问题。

我了解React中State的基本原理，但是在了解它们的生活方式和位置时缺少了一些东西。我想要一个函数来设置值的状态，然后在另一个函数中，根据该值的当前状态执行一些逻辑。但是，我无法在其他函数中访问该值的当前状态，而是仅获得页面加载时设置的状态。

这就是我所拥有的：

  async limit() {
    let goalName = await get_goal_name();
    let goal = await get_goal_target(goalName);
    this.setState((prevState) => ({
      targetGoal: goal
    }));
  }

  tick() {
    this.setState(prevState => ({
      minutes: prevState.minutes + 1,
    }));
  }

  async componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000); //change to 60000
    this.limit = this.limit();
    this.ogDiv = this.ogDiv();
  }

  ogDiv() {
    console.log("Minutes TICK: ");
    console.log(this.state.minutes);
  }


  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div style={divStyle}>
        <div>You've been here {this.state.minutes} minutes and the limit is {this.state.targetGoal} minutes</div>
      </div>

    );
  }
}

ReactDOM.render(<DomainGoalTimer />, document.getElementById('root'));

如您所见，我正在尝试访问函数tick中ogDiv()的状态。现在，我仅获得在页面加载(0)上设置的状态。

感谢您的帮助，谢谢！

Answer 1

您应该将这些函数绑定到构造函数中，或者将它们转换为箭头函数。

class DomainGoalTimer extends React.Component{
constructor(props){
    super(props);
    this.limit = this.limit.bind(this);
    this.ogDiv = this.ogDiv.bind(this);
    this.tick = this.tick.bind(this);
}

Answer 2

当您已经绑定了函数时，请不要忘记添加以前的状态：

this.setState(prevState => ({
      ...prevState,
      minutes: prevState.minutes + 1,
}));

在另一个功能中访问当前状态

2 个答案: