React中useState初始化值异常：props值存在但输入框无显示

问题场景 #

在EditAboutModal组件中，console.log(props.data.Name)能正常输出有效值（例如"SomeName"），但通过useState(props.data.Name)初始化的Name状态并未在inputName输入框中显示，打印Name变量结果为unknown，需要让useState正确将Name初始化为props.data.Name的值。

原简化代码：

function EditAboutModal(props) {
    const [show, setShow] = useState(false);

    console.log(props.data.Name);
    const [Name, setName] = useState(props.data.Name);
    function handleNameChange(e) {
        setName(e.target.value);
    }

    return (
        <>
          <div className="row mb-3">
            <label htmlFor="inputName" className="col-sm-2 col-form-label">Name:</label>
            <div className="col-sm-10">
              <input type="text" className="form-control" id="inputName" value={Name} onChange={handleNameChange} />
            </div>
          </div>
        </>
    );
}

问题原因 #

React中useState的初始值仅在组件首次渲染时生效。如果props.data.Name是异步获取的（比如从后端接口加载），组件首次渲染时props.data.Name可能还处于unknown或未定义状态，此时useState会用这个值初始化Name。后续props更新时，useState不会自动同步新的props值，导致Name始终保持首次初始化的unknown；而console.log(props.data.Name)是在后续渲染中执行的，所以能看到有效值。

解决方案 #

方案1：用useEffect监听props变化同步状态 #

通过useEffect监听props.data.Name的变化，当props更新时手动同步到本地状态：

function EditAboutModal(props) {
    const [show, setShow] = useState(false);
    const [Name, setName] = useState(props.data.Name);

    // 监听props.data.Name的变化，同步到本地状态
    useEffect(() => {
        setName(props.data.Name);
    }, [props.data.Name]);

    function handleNameChange(e) {
        setName(e.target.value);
    }

    return (
        <>
          <div className="row mb-3">
            <label htmlFor="inputName" className="col-sm-2 col-form-label">Name:</label>
            <div className="col-sm-10">
              <input type="text" className="form-control" id="inputName" value={Name} onChange={handleNameChange} />
            </div>
          </div>
        </>
    );
}

方案2：直接使用props值+父组件回调更新（无本地状态） #

如果不需要单独维护本地状态，可直接将props.data.Name作为input的value，修改时通过父组件传递的回调更新props的数据源：

function EditAboutModal(props) {
    const [show, setShow] = useState(false);

    function handleNameChange(e) {
        // 调用父组件的回调函数，更新父组件中的数据源
        props.onNameChange(e.target.value);
    }

    return (
        <>
          <div className="row mb-3">
            <label htmlFor="inputName" className="col-sm-2 col-form-label">Name:</label>
            <div className="col-sm-10">
              <input type="text" className="form-control" id="inputName" value={props.data.Name} onChange={handleNameChange} />
            </div>
          </div>
        </>
    );
}

注：使用该方案时，父组件需要传递onNameChange回调函数，用于更新props.data.Name的值。

内容的提问来源于stack exchange，提问作者Cahit Öz