React组件Props更新未同步至FormControl状态的问题排查与解决

问题背景 #

我们开发了带可编辑SVG标题的React组件OurGraph，通过foreignObject和FormControl实现文本编辑。组件初始化时会将传入的headerText props赋值给本地状态graphText。父组件Parent通过按钮切换headerText的值，但点击按钮后，OurGraph里的FormControl文本并未随props更新。需求是：当headerText变化时，覆盖本地编辑的graphText值，实现同步更新。

OurGraph组件代码 #

import { FormControl } from 'react-bootstrap';

function OurGraph({ headerText }) {
    const [graphText, setGraphText] = useState(headerText);

    const ourHeader = (
        <foreignObject width='100%' height='40'>
            <div xmlns='http://www.w3.org/1999/xhtml'>
                <FormControl
                    className='modal-input no-style'
                    type='text'
                    value={graphText}
                    onChange={e => setGraphText(e.target.value)}
                    name='subheader'
                    placeholder=''
                />
            </div>
        </foreignObject>);

    return (<svg>{ourHeader}</svg>);
}

Parent组件代码 #

function Parent() {
    const [button, setButton] = useState(true);
    const buttonElement = (
        <button onClick={() => setButton(!button)}>
             CLICK ME
         </button>);

    return (
        <>            
            {buttonElement}
            <OurGraph headerText={button === true ? 'true text' : 'false text'} />
        </>
    )
}

问题 #

1. 为什么headerText更新后，graphText状态不会变化？
2. 如何实现props更新时同步覆盖本地状态值？

原因分析 #

React的useState初始化逻辑仅在组件首次挂载时执行一次。后续父组件更新headerText props时，useState(headerText)不会重新运行，本地状态graphText会保持初始值或之前编辑后的内容，不会自动同步新的props值。

解决方案 #

使用useEffect钩子监听headerText的变化，当props更新时手动同步本地状态。修改后的OurGraph组件代码如下：

import { FormControl } from 'react-bootstrap';
import { useState, useEffect } from 'react';

function OurGraph({ headerText }) {
    const [graphText, setGraphText] = useState(headerText);

    // 监听headerText props变化，同步更新本地状态
    useEffect(() => {
        setGraphText(headerText);
    }, [headerText]); // 依赖项设置为headerText，仅当它变化时执行

    const ourHeader = (
        <foreignObject width='100%' height='40'>
            <div xmlns='http://www.w3.org/1999/xhtml'>
                <FormControl
                    className='modal-input no-style'
                    type='text'
                    value={graphText}
                    onChange={e => setGraphText(e.target.value)}
                    name='subheader'
                    placeholder=''
                />
            </div>
        </foreignObject>);

    return (<svg>{ourHeader}</svg>);
}

代码说明 #

• 引入useEffect钩子，将headerText作为依赖项传入数组。
• 每当headerText从父组件传来新值时，useEffect会触发，调用setGraphText将本地状态更新为最新的props值，确保FormControl的显示与props同步。

内容的提问来源于stack exchange，提问作者Canovice