React组件Test状态更新异常：传入defaultAmount后值回退

问题根源 #

你的Test组件出现状态回退的核心原因是useEffect的逻辑和依赖设置错误：

• 当页面1传入defaultAmount={25}时，每次输入框修改Amount状态，useEffect会因为依赖数组中的Amount或props变化而触发。此时props.defaultAmount存在，代码会执行setAmount(props.defaultAmount)，把状态强行重置为默认值，导致输入后立刻回退。
• 另外，useEffect中调用props.getResult(Amount)时，由于setAmount是异步操作，可能传递的是旧的Amount值，无法同步获取最新状态。

修复方案 #

方案1：基础修复（默认值仅初始化一次）

把defaultAmount作为useState的初始值，只在组件挂载时初始化一次，避免后续重复覆盖；同时调整getResult的调用时机，确保传递最新状态：

import { useEffect, useState } from "react";

const Test = (props) => {
    // 直接用defaultAmount作为初始值，无默认值则用1
    const [Amount, setAmount] = useState(props.defaultAmount || 1);

    // 仅当Amount变化时调用getResult，确保传递最新值
    useEffect(() => {
        props.getResult(Amount);
    }, [Amount, props.getResult])

    return (
        <>
            <span>Amount is: {Amount}</span>
            <input value={Amount} onChange={(e) => setAmount(e.target.value)} />
        </>
    )
}

export default Test;

方案2：支持defaultAmount动态更新（可选）

如果你的场景中defaultAmount需要在组件挂载后动态变化并同步到状态，可以给useEffect添加props.defaultAmount作为依赖，但加判断避免覆盖用户输入：

import { useEffect, useState } from "react";

const Test = (props) => {
    const [Amount, setAmount] = useState(props.defaultAmount || 1);

    // 仅当defaultAmount变化且与当前状态不同时，才更新状态
    useEffect(() => {
        if (props.defaultAmount !== undefined && props.defaultAmount !== Amount) {
            setAmount(props.defaultAmount);
        }
    }, [props.defaultAmount])

    // Amount变化时调用getResult
    useEffect(() => {
        props.getResult(Amount);
    }, [Amount, props.getResult])

    return (
        <>
            <span>Amount is: {Amount}</span>
            <input value={Amount} onChange={(e) => setAmount(e.target.value)} />
        </>
    )
}

export default Test;

关键优化点 #

• 改用useState直接初始化状态，避免在useEffect中重复覆盖用户输入。
• 拆分useEffect职责，分别处理默认值同步和结果回调，逻辑更清晰。
• 依赖数组仅保留必要项，避免无意义的触发，同时解决闭包导致的旧值问题。

内容的提问来源于stack exchange，提问作者Jack The Baker