React useState被忽略：EditableText组件输入框无法显示状态值问题

• EditableText组件的内部状态editingText仅在组件初始化时从props.text赋值一次，后续父组件传入的text属性发生变化时，该内部状态不会同步更新。
• 初始渲染时父组件的activeCat是空对象，传入的text为undefined，editingText初始化值就是undefined。后续切换选中的猫咪时，父组件传入新的text值，但editingText仍保留旧值，因此输入框无法正确展示对应内容。

方案1：添加属性同步副作用（推荐） #

在EditableText组件中新增监听props.text变化的副作用，当外部传入的文本更新时，同步更新内部的editingText状态即可。
修改后的EditableText代码如下：

const EditableText = (props) => {
  const { text, saveText } = props;
  const [editing, setEditing] = useState(false);
  const [editingText, setEditingText] = useState(text);

  // 新增：监听外部text属性变化，同步更新内部编辑状态
  useEffect(() => {
    setEditingText(text);
  }, [text]);

  useEffect(() => {
    const handleKeydown = (e) => {
      if (editing) {
        if (e.keyCode === 13) {
          // 按下回车键保存
          saveText(editingText);
          setEditing(false);
        }
        if (e.keyCode === 27) {
          // 按下ESC键放弃编辑
          setEditingText(text);
          setEditing(false);
        }
      }
    };
    window.addEventListener("keydown", handleKeydown);

    return () => {
      window.removeEventListener("keydown", handleKeydown);
    };
  }, [text, saveText, editing, editingText]);
  
  return (
    <div>
      <div
        onClick={() => setEditing(true)}
        className={`et-${editing ? "hidden" : "active"}`}
      >
        {text}
      </div>
      <input
        type="text"
        value={editingText}
        onChange={(e) => setEditingText(e.target.value)}
        className={`et-input-${editing ? "active" : "hidden"}`}
      />
    </div>
  );
};

export default EditableText;

方案2：给组件添加key属性 #

也可以在父组件调用EditableText时，绑定activeCat.id作为key，每次切换选中猫咪时，组件会销毁重建，内部状态会自动重新初始化：

<EditableText key={activeCat.id} text={activeCat.name} saveText={saveName} />

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