Why am I getting NaN in this React component?-CodePudding

<body>
  <div id="root">
    
  </div>
  <script type="text/babel">

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

            this.state = {count: 0};
            this.props = {increment: 3};
        }

        increase() {
            this.setState((state, props) => ({
              count: state.count   props.increment
          }));
        }

        componentDidMount() {
            this.intervalId = setInterval(() => this.increase(), 1000);
        }

        componentWillUnmount() {
            clearInterval(this.intervalId);
        }

        render() {
            return (
                <h1>Counting: {this.state.count}</h1>
            );
        }
    }

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

  </script>
</body>

I'm getting "Counting: 0", then "Counting: NaN" after a second. Shouldn't it be increasing by 3 after every second?

I'm also getting the following warning:

"Warning: Count(...): When calling super() in Count, make sure to pass up the same props that your component's constructor was passed."

Why? I'm passing the same props to the super().

CodePudding user response：

By doing

this.props = {increment: 3};

you're confusing React.

Props should not be assigned inside a component. Props should only be passed down from the caller. Either remove that line and do

<Count increment={3} />

or put increment into state instead.

class Count extends React.Component {
    state = { count: 0 };
    increase() {
        this.setState((state, props) => ({
          count: state.count   props.increment
      }));
    }

    componentDidMount() {
        this.intervalId = setInterval(() => this.increase(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    render() {
        return (
            <h1>Counting: {this.state.count}</h1>
        );
    }
}

ReactDOM.createRoot(document.querySelector('.react')).render(<Count increment={3} />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

class Count extends React.Component {
    state = { count: 0, increment: 3 };
    increase() {
        this.setState((state, props) => ({
          count: state.count   state.increment
      }));
    }

    componentDidMount() {
        this.intervalId = setInterval(() => this.increase(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    render() {
        return (
            <h1>Counting: {this.state.count}</h1>
        );
    }
}

ReactDOM.createRoot(document.querySelector('.react')).render(<Count />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>