Question

当我点击我的孩子反应模块中的一个按钮时，它会递增我的计时器并应该在几分钟内将计时器传回给父计时器并将其返回到父计时器并存储为状态。

当我点击按钮时，它只运行一次 - 它不会在第二次点击时递增。我希望它能在每次点击时运行。

https://github.com/nimaiwalsh/Pomodora-Clock/tree/master/src

以下是我在父级中存储状态的函数

  updateTimer = (minutes, totalSeconds) => {
    this.setState({ minutes: minutes, totalSeconds: totalSeconds});
  }

我将回调作为道具传给了我的孩子

<SessionLength callbackFromApp={this.updateTimer} />

从我的孩子，我有以下

const SessionLength = ({ callbackFromApp }) => {

    let minutes = 1;
    let totalSeconds = 0; 

    const addOne = () => {
        minutes += 1;
        totalSeconds = minutes*60;
        console.log(minutes, totalSeconds);
        callbackFromApp(minutes, totalSeconds);
    }
    const removeOne = () => {
        if(minutes >0) {
            minutes -= 1;
            totalSeconds = minutes*60;
        }
        console.log(minutes, totalSeconds);
        callbackFromApp(minutes, totalSeconds);
    }
    return (
        <div className="session-length">
            <button className="minutes-add-btn" onClick={() => addOne()}>+</button>
            <p>{ minutes }</p>
            <button id="minutes-minus-btn" onClick={() => removeOne()}>-</button>
        </div>
    );
};

Answer 1

问题是当<SessionLength />的父级重新呈现（也就是通过callbackFromApp更新）时，会再次重新执行以下代码段

let minutes = 1;
let totalSeconds = 0;

重置计数器，因此在第一次点击后看不到差异。

将这些变量移到<SessionLength />之外，以便在每次更新时都不会重置它们。

Answer 2

这里使用的是无状态组件。每次初始化并给出相同的输出。这就是分钟没有增加的原因。

let minutes = 1;let totalSeconds = 0;

因此，保持父状态并发送到无状态子组件。现在可以获得输出。在下面的代码中找到您的更正。

import React from 'react';

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

      this.state = {minutes:1,totalSeconds:0};
      this.updateTimer=this.updateTimer.bind(this);
    }

    updateTimer(minutes, totalSeconds){
        console.log(minutes, totalSeconds);
        this.setState({ minutes: minutes, totalSeconds: totalSeconds});
    }

   render() {
      return (
        <div>
            <h1>Page Header</h1>
            <SessionLength callbackFromApp={this.updateTimer} minutesState={this.state.minutes}/>
            <p>minutes: {this.state.minutes}</p>
            <p>totalSeconds : {this.state.totalSeconds}</p>
        </div>
      );
   }
}

const SessionLength = ({ callbackFromApp,minutesState}) => {
    let minutes=minutesState,totalSeconds=0;
    const addOne = () => {
        minutes = minutesState+1;
        totalSeconds = minutes*60;
        callbackFromApp(minutes, totalSeconds);
    }
    const removeOne = () => {
        if(minutes >0) {
            minutes = minutesState-1;
            totalSeconds = minutes*60;
        }
        callbackFromApp(minutes, totalSeconds);
    }

    return (
        <div className="session-length">
            <button className="minutes-add-btn" onClick={() => addOne()}>+</button>
            <p>{ minutes }</p>
            <button id="minutes-minus-btn" onClick={() => removeOne()}>-</button>
        </div>
    );
};

export default HeadComponent;

React - callbackFromApp函数只运行一次onClick

2 个答案: