Question

我正在调用带有两个道具的BarChart和name两个React组件。如下面的代码所示，变量值每秒设置为一个新的随机数：

value

在React组件内部，我使用let random1; function setRandom() { random1 = Math.floor(Math.random() * 10) + 1; } setRandom(); setInterval(setRandom, 1000); return ( <div className="Content"> <BarChart name1={"A"} value1={random1}/> </div> ) }对其进行了调用。当我在React组件中每秒进行this.props.value1时，我得到一个错误，即在第一次打印后变量未定义。因此，它会在控制台上打印1次，然后在其余所有尝试中仅打印一个错误。

这是我在组件内部打印变量的方式：

console.log(this.props.value1)

我真正想做的是，每当在组件外部生成新的随机值时，组件都应看到变量已更改，并刷新组件并使用新的道具。

你能告诉我吗？

Answer 1

执行此操作的标准方法是使random1成为state information的一部分，然后使用this.setState对其进行更新。

first link above有一个滴答时钟的示例，实际上与您每秒的随机数示例相同。这是一个示例，您可以轻松地适应您的任务：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

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

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

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

Answer 2

constructor(props) {
  super(props);
//innitialize the random number in the state
  this.state = {random: Math.floor(Math.random() * 10) + 1};
}
//generate the random number and keep in on the state
  setRandom() {
    this.setState({random: Math.floor(Math.random() * 10) + 1})

  }
//clear the timer when component unmount
componentWillUnmount() {
  clearInterval(this.timer);
}
componentDidMount() {
//start the timer when component mount
  this.timer = setInterval(()=>this.setRandom(), 1000);
}
//pass the random value from state as props to the component BarChart
  return (
  <div className="Content">
      <BarChart name1={"A"} value1={this.state.random}/>
  </div>
)
}

变量更改时反应刷新组件

2 个答案: