Question

因此，我在这里阅读了有关该主题的许多其他文章，但是我仍然无法根据所看到的答案解决问题。我正在创建两个计数器，并将它们的状态用作数组中的值（只是为了与React一起玩，没有实际或逻辑上的用途），我想将计数器数组传递给另一个组件。但是，数组中的值未显示更新状态（即在控制台日志中），但始终落后一步。我知道这是因为它是异步的，我应该以某种方式使用useEffect，但是我根本无法弄清楚应该如何使它按预期工作。我对React还是很陌生-任何帮助将不胜感激！

function Counter() {
    const [count1, setCount1State] = useState(0);
    const [count2, setCount2State] = useState(0);
    

    let counters = [
        { name: 1, count: count1State },
        { name: 2, count: count2State },
       
    ];

    useEffect(() => {
        //WHAT SHOULD I DO HERE TO HAVE COUNTERS HOLDING THE LATEST STATE VALUES?
    }, [count1, count2]);

    function increaseCounter(name: number) {
        switch (name) {
            case 1: {
                setCount1State(count1 + 1);
                break;
            }
            case 2: {
                setCount2State(count2 + 1);
                break;
            }
        }
    }

    function decreaseCounter(name: number) {
        switch (name) {
            case 1:        
                    setCount1State(count1 - 1);
                    break;
            }

            case 2:
                    setCount2State(count2 - 1);
                    break;
            }
        }
    }

Answer 1

您不需要useEffect。

function Counter() {
    const [count1, setCount1State] = useState(0);
    const [count2, setCount2State] = useState(0);

    function increaseCounter(name: number) {
        switch (name) {
            case 1: {
                setCount1State(count1 + 1);
                break;
            }
            case 2: {
                setCount2State(count2 + 1);
                break;
            }
        }
    }

    function decreaseCounter(name: number) {
        switch (name) {
            case 1:        
                    setCount1State(count1 - 1);
                    break;
            }

            case 2:
                    setCount2State(count2 - 1);
                    break;
            }
        }
    }
    return {
    <>
            <h3>Counter1: {count1}</h3>
            <h3>Counter2: {count2}</h3>
            <Button onClick={() => increaseCounter(1)}>IncreaseCounter1</Button>
            <Button onClick={() => increaseCounter(2)}>IncreaseCounter2</Button>
    </>};
    };

以此类推

Answer 2

如果只希望重新呈现表示状态的组件（或JSX中包含的元素），则无需使用该挂钩。状态更改后立即更新。您只应该发送这样的值：

// if component is used:
return <Component state={state} changeState={setState} />
// in case of JSX element usage:
return <div>{state}</div>

UseEffect用于某些其他工作，例如其他状态更新，DOM更改，获取数据等。使用它时，请务必谨慎使用依赖项列表。这是您的示例：

useEffect(() => {
  // fetching data etc
}, [count1, count2]);

在这里，您将count1和count2状态设置为该挂钩的依赖项。换句话说，当这些状态中的任何一个改变时，钩子就会触发。这意味着您不应该更改挂钩内的任何状态，否则您将获得无限循环。

React useState落后一步

2 个答案: