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

Question

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

React 组件是否在某个地方被调用了两次？

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

应用程序.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;

计数器.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')
);