React App - 我的警报窗口显示了两次

Question

我不明白为什么会发生这种情况 - 我有一个应用程序，当按下按钮以显示集合中不断增加的复活节彩蛋品牌列表时，计数器会递增和递减。当计数器达到集合中的最大鸡蛋数量时，我希望出现一个弹出窗口，显示“已达到限制”。弹出窗口出现了，但是当我点击确定时，同样的弹出窗口再次出现！

React 组件是否在某处被调用了两次？

如果有人有任何想法，将不胜感激。

App.js

    import logo from './logo.svg';
    import Counter from './Counter';
    import EggList from './EggList';
    import './App.css';
    
    function App() {
    
      return (
        <div className="App">
          <Counter></Counter>      
        </div>
      );
    }
    
    export default App;

Counter.js

    import React from 'react';
    import EggList from './EggList';
    
    class Counter extends React.Component {
    
      constructor(props) {
        super(props) 
        this.state = { 
          counter: 0
        }
    
        this.increment = this.increment.bind(this)
        this.decrement = this.decrement.bind(this) 
    
      }
    
      increment(){
        this.setState({ counter: this.state.counter + 1 })
      };
    
      decrement(){
        this.setState({ counter: this.state.counter - 1 })
      };
      
      render() {
        const { counter } = this.state;
        var eggsArray = [
            'Lindt',
            'Creme Egg',
            'Oreo',
            'Cadburys',
            'Mars',
            'Aero'
          ];
        return (
          <div>
            <h1 id="counter">{counter}</h1>
            <button type="button" id="decrement" onClick={this.decrement}>Decrement</button>
            <button type="button" id="increment" onClick={this.increment}>Increment</button>
            <EggList eggs={eggsArray} counter={counter}></EggList>
          </div>
        )
      }
    }
    
    export default Counter;

Egglist.js

    import React from 'react';
    
    class EggList extends React.Component {
        render(){
            var eggs = [];
            var upperlimit = false;
            if(this.props.counter < 0){
                window.alert("Warning: Counter cannot be less than zero");
                
            }
            for(var i = 0; i < this.props.counter; i++){
                console.log("Counter: " + this.props.counter);
                console.log("Total eggs: " + this.props.eggs.length);
                if(this.props.counter > this.props.eggs.length){
                    upperlimit = true;
                    break;
                }                    
                eggs.push(<li key={i.toString()}>{this.props.eggs[i]}</li>);
            }
            if(upperlimit === true){
                console.log('upperlimit');
                window.alert("Warning: Counter exceeds number of eggs");
                
            }
           
        
        
            return (
    
    
                <ul className="egg-list">
                    {eggs}
                </ul>
            )
       } 
    }
    
    export default EggList;

谢谢，

罗伯特

英国伦敦

Answer 1

你的 index.js 有标签严格模式吗？ 如果是这种情况，请将其删除并重试。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

试试这个：

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