React中共享状态的双元素同步更新问题排查与修复求助

需求：两个元素共享同一状态，修改其中一个时另一个同步更新，反之亦然。当前代码无报错但无法正常运行，需修复。

原代码 #

渲染组件： #

<Editors name="Hello" />

实际组件： #

import * as React from 'react';
import { useEffect, useState } from 'react';

export interface IName {
  name: string;
}

function Editors(props: IName) {
  const [name, setName] = useState('');

  useEffect(() => {
    setName(props.name);
  }, [props, name]);

  return (
    <React.Fragment>
      <div>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </div>

      <br />

      <div>
        <textarea
          value={name}
          onChange={(e) => setName(e.target.value)}
        ></textarea>
      </div>
    </React.Fragment>
  );
}

export default Editors;

问题分析与修复方案 #

核心问题 #

• useEffect无限循环：依赖数组包含props和name，调用setName更新name后会触发useEffect重新执行，再次调用setName形成循环。
• 初始状态赋值错误：state初始化为空字符串，未使用传入的props.name，导致初始显示异常。

修复后的代码 #

import * as React from 'react';
import { useState } from 'react';

export interface IName {
  name: string;
}

function Editors(props: IName) {
  // 直接用props.name初始化state，无需额外useEffect
  const [name, setName] = useState(props.name);

  return (
    <>
      <div>
        <input value={name} onChange={(e) => setName(e.target.value)} />
      </div>

      <br />

      <div>
        <textarea
          value={name}
          onChange={(e) => setName(e.target.value)}
        ></textarea>
      </div>
    </>
  );
}

export default Editors;

补充说明 #

如果需要响应父组件传入的props.name后续变化，可添加仅依赖props.name的useEffect：

useEffect(() => {
  setName(props.name);
}, [props.name]);

这样父组件更新name属性时，子组件状态会同步更新，且不会触发无限循环。

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