Javascript React-callbackFromApp函数仅在单击时运行一次

当单击“我的孩子反应”模块中的按钮时，它会增加我的计时器，并应以分钟和总秒数将计时器传回给家长，并存储为状态

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

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

  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>
    );
};

const SessionLength=（{callbackFromApp}）=>{
分钟=1；
让totalSeconds=0；
常量addOne=（）=>{
分钟+=1；
总秒数=分钟*60；
console.log（分钟，总秒）；
callbackFromApp（分钟，总秒）；
}
常量removeOne=（）=>{
如果（分钟>0）{
分钟-=1；
总秒数=分钟*60；
}
console.log（分钟，总秒）；
callbackFromApp（分钟，总秒）；
}
返回(
addOne（）}>+
{分钟}

removeOne（）}>-
);
};

问题在于，当重新呈现

的父对象时（也就是通过

callbackFromApp

更新），将再次执行以下代码段

let minutes = 1;
let totalSeconds = 0; 

这将重置计数器，因此在第一次单击后看不到差异

---

将这些变量移到

之外，以便在每次更新时不会重置它们。

这里使用的是无状态组件。每次初始化时，它们都会给出相同的输出。这就是分钟不是增量

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”导入React；
类HeadComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={minutes:1，totalSeconds:0}；
this.updateTimer=this.updateTimer.bind（this）；
}
updateTimer（分钟，总秒）{
console.log（分钟，总秒）；
this.setState（{minutes:minutes，totalSeconds:totalSeconds}）；
}
render（）{
返回(
页眉
分钟：{this.state.minutes}

totalSeconds:{this.state.totalSeconds}

);
}
}
常量会话长度=（{callbackFromApp，minuteState}）=>{
分钟数=分钟数，总秒数=0；
常量addOne=（）=>{
分钟数=分钟数状态+1；
总秒数=分钟*60；
callbackFromApp（分钟，总秒）；
}
常量removeOne=（）=>{
如果（分钟>0）{
分钟数=分钟数状态-1；
总秒数=分钟*60；
}
callbackFromApp（分钟，总秒）；
}
返回(
addOne（）}>+
{分钟}

removeOne（）}>-
);
};
导出默认HeadComponent；

什么意思？它只运行一次？第二次单击时，它不会增加分钟数吗？确切地说，再次单击时，它不会增加分钟数父工具是否应该更新组件？您是否在父级中呈现正确的状态？console.log打印正确的输出？我没有在父级中使用shouldComponentUpdate。我已经更新了GitHub-谢谢！很简单，我在这里坐了好几个小时，头都缠着它。显然还是很新用的！