如何实现React组件内部与外部均可修改状态值？

我希望能同时从React组件的内部和外部修改某个值，但遇到了以下问题：

• 未从内部修改前，外部修改有效
• 一旦从内部修改后，无法再从外部修改该值

复现代码 #

App.js #

import React, { useState } from "react";
import "./styles.css";
import TestParam from "./TestParam";

export default function App() {
  const [outsideChange, setOutsideChange] = useState(null);
  return (
    <div className="App">
      <button
        onClick={() => {
          setOutsideChange("");
          setOutsideChange("Changed from outside");
        }}
      >
        Change from the outside
      </button>
      <br />
      <br />
      <TestParam testStringProp={outsideChange} />
    </div>
  );
}

TestParam.js #

import React, { useState, useEffect } from "react";

export default function TestParam({ testStringProp }) {
  const [testString, setTestString] = useState(testStringProp);
  useEffect(() => {
    setTestString(testStringProp);
    // alert("in useEffect");
  }, [testStringProp]);

  return (
    <>
      <button onClick={() => setTestString("changed from inside component")}>
        Change from inside
      </button>
      <h1>Result here: {testString}</h1>
      <p>Change from the ouside works if done before change from the inside</p>

      <p>
        Once changed from the inside, impossible to change again from the
        outside
      </p>
    </>
  );
}

问题原因 #

核心问题是状态不同步+重复值未触发更新：

1. TestParam组件内部维护了独立的testString状态，仅在组件初始化和testStringProp变化时，通过useEffect同步外部传入的值。
2. 外部按钮点击时，连续两次设置outsideChange为空和"Changed from outside"——React会批量处理状态更新，最终outsideChange的值没有发生实质变化（首次点击后已经是该值），导致TestParam的useEffect依赖未触发，内部状态无法同步更新。

解决方案 #

方案1：确保外部状态每次更新都有变化 #

调整外部按钮的点击逻辑，避免重复设置相同值，比如给字符串添加唯一标识：

// App.js中修改按钮点击事件
onClick={() => {
  setOutsideChange(`Changed from outside ${Date.now()}`);
}}

每次点击都会生成不同的字符串，testStringProp会触发变化，useEffect就能同步更新内部状态。

方案2：状态提升（推荐） #

遵循React单向数据流原则，把状态完全托管在父组件，子组件通过回调修改父组件状态，内外操作同一状态，从根源避免不同步问题：

修改TestParam.js

import React from "react";

export default function TestParam({ testString, onTestStringChange }) {
  return (
    <>
      <button onClick={() => onTestStringChange("changed from inside component")}>
        Change from inside
      </button>
      <h1>Result here: {testString}</h1>
      <p>Change from the outside works at any time now</p>
    </>
  );
}

修改App.js

import React, { useState } from "react";
import "./styles.css";
import TestParam from "./TestParam";

export default function App() {
  const [sharedValue, setSharedValue] = useState(null);
  return (
    <div className="App">
      <button
        onClick={() => {
          setSharedValue("Changed from outside");
        }}
      >
        Change from the outside
      </button>
      <br />
      <br />
      <TestParam testString={sharedValue} onTestStringChange={setSharedValue} />
    </div>
  );
}

这种方式让状态唯一来源是父组件，子组件仅负责渲染和触发状态修改，是React处理跨组件状态同步的标准做法。

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