ReactJS：如何在没有单击延迟的情况下刷新组件

我正在学习React，当父组件的状态被另一个子组件更改时，我无法刷新子组件。我发现我应该使用

组件willreceiveprops（）

，它可以工作，但只需单击一次延迟。我应该更改什么以获得即时更新

我已经在CodePen上发布了我的代码，以便于解释。如果它是更好的张贴在这里直接请让我知道，我会更新

问题：

• 当我增加或减少时钟设置器（+和-按钮）中的长度时，父级的状态立即改变，但计时器中的会话长度显示以前的值
• 当我点击“重置”按钮时，父母的状态会立即改变，但时钟设置器的长度和计时器的长度不会改变为时钟设置器的长度。再次单击后，将两个子项的长度更改重置为父项的状态
• 如果我在重置后尝试增加或减少（而不是第二次单击重置），它会变得疯狂（我找不到规则如何更改）

是否可以只使用React或我应该开始学习Redux

编辑：我的代码

import React from 'react';
import './PomodoroClock.scss';

class PomodoroClock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sessionLength: 25,
      breakLength: 5,
    };
    this.handleTime = this.handleTime.bind(this);
    this.handleReset = this.handleReset.bind(this);
  }

  handleTime(type, time) {
    this.setState({
      [type]: time
    });
  }

  handleReset() {
    this.setState({
      sessionLength: 25,
      breakLength: 5,
    });
  }

  render() {
    return (
      <div className="container">
        <ClockSetter clockType="break" initialLength={this.state.breakLength} handleTime={this.handleTime} />
        <ClockSetter clockType="session" initialLength={this.state.sessionLength} handleTime={this.handleTime} />
        <Timer sessionLength={this.state.sessionLength} reset={this.handleReset}/>
        <span>TEST: State session - {this.state.sessionLength} State break - {this.state.breakLength}</span>
      </div>
    );
  }
}

class ClockSetter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      length: this.props.initialLength
    }
    this.handleDecrease = this.handleDecrease.bind(this);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.refresh = this.refresh.bind(this);
  }

  handleDecrease() {
    if(this.state.length > 1) {
      this.setState ({
        length: this.state.length - 1
      });
    }
    this.props.handleTime(this.props.clockType+'Length', this.state.length - 1);
  }

  handleIncrease() {
    if(this.state.length < 60) {
      this.setState ({
        length: this.state.length + 1
      });
    }
    this.props.handleTime(this.props.clockType+'Length', this.state.length + 1);
  }

  refresh() {
    this.setState({
      length: this.props.initialLength
    });
  }

  componentWillReceiveProps(props) {
    if(this.state.length !== this.props.initialLength) {
      this.refresh();
    }
  }

  render() {
    let type = this.props.clockType;
    return(
      <div className="clock-setter">
        <div id={type + '-label'} className="first-letter-capitalize">{type + ' Length'}</div>
        <span id={type + '-decrement'} className="button" onClick={this.handleDecrease}>-</span>
        <span id={type + '-length'}>{this.state.length}</span>
        <span id={type + '-increment'} className="button" onClick={this.handleIncrease}>+</span>
      </div>
    );
  }
}

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeCountdown: 'Session',
      length: this.props.sessionLength
    }
    this.refresh = this.refresh.bind(this);
  }

  refresh() {
    this.setState({
      length: this.props.sessionLength
    });
  }

  componentWillReceiveProps(props) {
    if(this.state.length !== this.props.sessionLength) {
      this.refresh();
    }
  }

  render() {
    return(
      <div className="timer">
        <span id="timer-label">{this.state.activeCountdown}</span>
        <div id="time-left">{this.state.length}</div>
        <span id="start_stop" className="button">Start/Stop</span>
        <span id="reset" className="button" onClick={this.props.reset}>Reset</span>
      </div>
    );
  }
}


export default PomodoroClock;

从“React”导入React；
导入“/PomodoroClock.scss”；
类PomodoroClock扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
会期：25，
断裂长度：5，
};
this.handleTime=this.handleTime.bind（this）；
this.handleReset=this.handleReset.bind（this）；
}
处理时间（类型、时间）{
这是我的国家({
[类型]：时间
});
}
handleReset（）{
这是我的国家({
会期：25，
断裂长度：5，
});
}
render（）{
返回(
测试：状态会话-{this.State.sessionLength}状态中断-{this.State.breakLength}
);
}
}
类时钟设置器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
长度：this.props.initialLength
}
this.handledecrese=this.handledecrese.bind（this）；
this.handleIncrease=this.handleIncrease.bind（this）；
this.refresh=this.refresh.bind（this）；
}
HandleDecrese（）{
如果（this.state.length>1）{
这是我的国家({
长度：this.state.length-1
});
}
this.props.handleTime（this.props.clockType+'Length'，this.state.Length-1）；
}
handleIncrease（）{
如果（this.state.length<60）{
这是我的国家({
长度：this.state.length+1
});
}
this.props.handleTime（this.props.clockType+'Length'，this.state.Length+1）；
}
刷新（）{
这是我的国家({
长度：this.props.initialLength
});
}
组件将接收道具（道具）{
if（this.state.length！==this.props.initialLength）{
这个。刷新（）；
}
}
render（）{
let type=this.props.clockType；
返回(
{type+'Length'}
-
{this.state.length}
+
);
}
}
类计时器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
活动倒计时：“会话”，
长度：this.props.sessionLength
}
this.refresh=this.refresh.bind（this）；
}
刷新（）{
这是我的国家({
长度：this.props.sessionLength
});
}
组件将接收道具（道具）{
if（this.state.length！==this.props.sessionLength）{
这个。刷新（）；
}
}
render（）{
返回(
{this.state.activeCountdown}
{this.state.length}
启动/停止
重置
);
}
}
导出默认PomodoroClock；

让我们以这样一种方式重构您的代码，解决眼前的问题，同时解决一些会让您头痛的错误做法和反模式

因为您才刚刚开始，这是学习的最佳时机，因为它们将使您的代码更简单，更容易理解

代码中的主要陷阱是重复状态。让我们从计时器组件开始

您正在将其初始状态

length

设置为其父状态

sessionLength

的值。即使您可以认为这是某种类型的“初始”状态，然后计时器的

长度

将独立于

会话长度

，但一旦倒计时开始，这是不必要的。事实上99%的情况下不需要重复状态

那么计时器应该处于什么状态呢？我认为计时器可能有自己的内部计数器状态，这样您可以像

this.props.sessionLength-this.state.elapsedTime

那样显示当前时间，但在您的情况下，计时器实际上没有进行任何计时。无论如何，您都在父级跟踪当前时间

知道这一点。。计时器的状态应该是什么？没有什么！答案是没有国家。计时器可以是一个函数，而不是一个类，可以接收道具并显示它们

function Timer(props) {
  return (
    <div className="timer">
      <span id="timer-label">Session</span>
      <div id="time-left">{props.sessionLength}</div>
      <span id="start_stop" className="button">
        Start/Stop
      </span>
      <span id="reset" className="button" onClick={props.reset}>
        Reset
      </span>
    </div>
  )
}

为了简洁起见，我内联了

onClick

处理程序。您可以在return语句上方编写命名的

handleDecrease

和

handleIncrease

函数，并根据需要将

onClick

传递给它们。不过，这只是偏好的问题

*注意：道具现在是

length

而不是

initialLength

。在呈现时钟设定器组件时，请确保更新该组件

对于最后一次重构，我已经更新了React cdn，以指向最新的稳定版本

16.8.3

，因为它包含挂钩

与其使用类，不如编写一个普通函数并使用

React.useState

hook。代码如下所示：

function PomodoroClock() {
  let [sessionLength, setSessionLength] = React.useState(25)
  let [breakLength, setBreakLength] = React.useState(5)

  function handleReset() {
    setSessionLength(25)
    setBreakLength(5)
  }

  return (
    <div className="container">
      <ClockSetter
        clockType="break"
        length={breakLength}
        handleTime={setBreakLength}
      />
      <ClockSetter
        clockType="session"
        length={sessionLength}
        handleTime={setSessionLength}
      />
      <Timer
        sessionLength={sessionLength}
        reset={handleReset}
      />
      <span>
        Parent's state TEST: session - {sessionLength} break -
        {breakLength}
      </span>
    </div>
  )
}

这就是现在的整个计划：

function PomodoroClock() {
  let [sessionLength, setSessionLength] = React.useState(25)
  let [breakLength, setBreakLength] = React.useState(5)

  function handleReset() {
    setSessionLength(25)
    setBreakLength(5)
  }

  return (
    <div className="container">
      <ClockSetter
        clockType="break"
        length={breakLength}
        handleTime={setBreakLength}
      />
      <ClockSetter
        clockType="session"
        length={sessionLength}
        handleTime={setSessionLength}
      />
      <Timer
        sessionLength={sessionLength}
        reset={handleReset}
      />
      <span>
        Parent's state TEST: session - {sessionLength} break -
        {breakLength}
      </span>
    </div>
  )
}

function ClockSetter(props) {
  let type = props.clockType
  return (
    <div className="clock-setter">
      <div id={type + '-label'} className="first-letter-capitalize">
        {type + ' Length'}
      </div>
      <span
        id={type + '-decrement'}
        className="button"
        onClick={() => props.handleTime(props.length - 1)}
      >
        -
      </span>
      <span id={type + '-length'}>{props.length}</span>
      <span
        id={type + '-increment'}
        className="button"
        onClick={() => props.handleTime(props.length + 1)}
      >
        +
      </span>
    </div>
  )
}

function Timer(props) {
  return (
    <div className="timer">
      <span id="timer-label">Session</span>
      <div id="time-left">{props.sessionLength}</div>
      <span id="start_stop" className="button">
        Start/Stop
      </span>
      <span id="reset" className="button" onClick={props.reset}>
        Reset
      </span>
    </div>
  )
}

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

函数PomodoroClock（）{
let[sessionLength，setSessionLength]=React.useState（25）
let[breakLength，setBreakLength]=React.useState（5）
函数handleReset（）{
设置会话长度（25）
退刀长度（5）
}
复述
onClick={() => props.handleTime(props.length + 1)}

function PomodoroClock() {
  let [sessionLength, setSessionLength] = React.useState(25)
  let [breakLength, setBreakLength] = React.useState(5)

  function handleReset() {
    setSessionLength(25)
    setBreakLength(5)
  }

  return (
    <div className="container">
      <ClockSetter
        clockType="break"
        length={breakLength}
        handleTime={setBreakLength}
      />
      <ClockSetter
        clockType="session"
        length={sessionLength}
        handleTime={setSessionLength}
      />
      <Timer
        sessionLength={sessionLength}
        reset={handleReset}
      />
      <span>
        Parent's state TEST: session - {sessionLength} break -
        {breakLength}
      </span>
    </div>
  )
}

function ClockSetter(props) {
  let type = props.clockType
  return (
    <div className="clock-setter">
      <div id={type + '-label'} className="first-letter-capitalize">
        {type + ' Length'}
      </div>
      <span
        id={type + '-decrement'}
        className="button"
        onClick={() => props.handleTime(props.length - 1)}
      >
        -
      </span>
      <span id={type + '-length'}>{props.length}</span>
      <span
        id={type + '-increment'}
        className="button"
        onClick={() => props.handleTime(props.length + 1)}
      >
        +
      </span>
    </div>
  )
}

function Timer(props) {
  return (
    <div className="timer">
      <span id="timer-label">Session</span>
      <div id="time-left">{props.sessionLength}</div>
      <span id="start_stop" className="button">
        Start/Stop
      </span>
      <span id="reset" className="button" onClick={props.reset}>
        Reset
      </span>
    </div>
  )
}

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