Question

我试图通过外部函数Demoss更新组件getTime()的状态。我想开始更新页面加载state time上的时间。为了实现它，我在componentDidMount中调用了它。但由于某些原因，它不会发生。

import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import './index.css';

function getTime() {
  let a = setInterval(() =>
    {new Date()}, 1000 
  );
  return a;
}

class Demoss extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      time: '',
      timer: false
    };

    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    this.setState({
      time: getTime() // invoke setInterval state update, but it does not work
    });
  }

  componentWillUnmount() {
    clearInterval(getTime());
  }

  handleClick() {
    this.setState(prevState => ({
        timer: !prevState.timer
    }));

    if (this.state.timer === false) {
      clearInterval(this.timerId);
    } else if (this.state.timer === true) {
    }
  }

  render() {
    return (
      <div>
        <p>{this.state.time.toString()}</p>
        <button onClick={this.handleClick}><Dimes timer={this.state.timer}/></button>
      </div>
    );
  }
}

class Dimes extends React.Component {
  render() {
    if (this.props.timer === true) {
      return (
        <React.Fragment>
          Start timer again!
        </React.Fragment>
      );
    } else {
      return (
        <React.Fragment>
          Start timer!
        </React.Fragment>
      );      
    }

  }
}

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

Answer 1

通过执行以下更改，它将更新时间并重新呈现组件。

 let timeTicker = (self)=>  {self.setState({
    time:new Date().toString()
});}

class Demoss extends React.Component {

  componentDidMount(){
    let timer=setInterval(()=>timeTicker(this),1000);  
    this.setState({timer:timer});

 // keep the setInterval reference in state just so you can call clearInterval on this on `componentWillUnmount` hook
  }


  componentWillUnmount(){
    clearInterval(this.state.timer);
  }

}

new Date().toString()只是为了测试我将日期转换为字符串，但你必须在渲染之前将其格式化为字符串。

我确实省略了handleClick func你可以搞清楚

Answer 2

你的代码中有一些错误，所以我重写了它。

import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";

class Demoss extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      start_time: new Date(),
      now_time: new Date(),
      timer: false
    };

    this.handleClick = this.handleClick.bind(this);
    this.timer = this.timer.bind(this);
  }

  componentDidMount() {
    setInterval(this.timer, 1000);
  }

  componentWillUnmount() {
    // use intervalId from the state to clear the interval
    clearInterval(this.state.intervalId);
  }

  handleClick() {
    const state = this.state;

    state.start_time = new Date();
    state.now_time = new Date();
    if(!this.state.timer)
      state.timer = true;

    this.setState(state);
  }

  timer() {
    if(this.state.timer)
      this.setState({ now_time : new Date()});
  }

  render() {
    const getTimeDiff = (start_time, now_time) => {
      return Math.round((now_time.getTime() - start_time.getTime()) / 1000);
    };

    return (
      <div>
        <p>{getTimeDiff(this.state.start_time, this.state.now_time)}</p>
        <Dimes handleClick={this.handleClick} timer={this.state.timer} />
      </div>
    );
  }
}

class Dimes extends React.Component {
  render() {
    const renderButtonText = timer => {
      let text = "Start timer";
      if (timer) text += " again!";
      else text += "!";
      return text;
    };

    return (
      <button onClick={this.props.handleClick}>
        {renderButtonText(this.props.timer)}
      </button>
    );
  }
}

ReactDOM.render(<Demoss />, document.getElementById("root"));

反应。 getTime（）函数不更新状态

2 个答案: