React 中的 useState 钩子

Question

import React, { useState } from 'react';
import './App.css';

const app1 = () => {
     let [count, setCount] = useState(10);
     let initialValue = count;
      const increase = () => {
            setCount(count += 1);
            setCount(count += 1);
          }
      const decrease = () => {
            setCount(count -= 1);
            setCount(count -= 1);
          }
      const resetCounter = () => {
           setCount(initialValue);
           console.log(initialValue);
      }        

    return (
      <div className="App">
        <button onClick={increase}>+</button> {count} <button onClick={decrease}>-</button>
        <div><button onClick={resetCounter}>Reset</button></div>
      </div>
    );
  }

export default app1;

重置按钮行为不正常。 当我单击重置按钮时，不会打印初始值 10。 相反，它打印当前值。 有人可以解释并更正代码吗？

Answer 1

initialValue 始终是计数，这意味着它不是 10，而是当前计数。 您应该将初始值提取到一个常量之外，即：

const INITIAL_VALUE = 10;
const app1 = () => {
     let [count, setCount] = useState(INITIAL_VALUE);

...
      const resetCounter = () => {
           setCount(INITIAL_VALUE);
      } 
}

Answer 2

    import React, { useState } from 'react';
    import './App.css';
    const initialValue = 10;
    const app1 = () => {
         let [count, setCount] = useState(initialValue);
    
          const increase = () => {
                setCount(count += 1);
                setCount(count += 1);
              }
          const decrease = () => {
                setCount(count -= 1);
                setCount(count -= 1);
              }
          const resetCounter = () => {
               setCount(initialValue);
               console.log(initialValue);
          }        
    
        return (
          <div className="App">
            <button onClick={increase}>+</button> {count} <button onClick={decrease}>-</button>
            <div><button onClick={resetCounter}>Reset</button></div>
          </div>
        );
      }
    
    export default app1;

The issue happens because react renders when you use setCount and updates the initial value everytime.

Answer 3

您必须用setCount((oldvalue)=> newValue)替换对setCount(newValue)的每次调用。 这是因为您依赖旧值来计算新值。 您可以在此处了解更多功能更新