React中如何在孙组件使用setState？状态更新失效问题排查

我近期开始学习React，从官方文档了解到，若要让组件B和C共享状态，需将状态提升至它们最近的父组件A。我的组件结构如下：

Component A
|
Component B
|
|--Component B.child
|
Component C
|
|--Component C.child

我希望Component B.child和Component C.child共享名为[summary, setSummary]的状态，于是将该状态提升至Component A，目前已能正常将summary传递给目标组件。

我的问题是：能否在Component B.child和Component C.child中使用setSummary？如果可以，具体该如何操作？我在官方文档中看到的示例都是在父组件自身使用setState，而非在子组件中使用。我尝试将setSummary作为props传递，但未成功（可能操作有误）。

以下是我的代码摘要：

App.jsx

import { useState } from "react";
import Left from "./components/Left";
import Right from "./components/Right";

function App() {
  const [summary, setSummary] = useState("InitialSummary");

  return (
    <div className="content">
      <Left
        summary={summary}
        setSummary={setSummary}
      ></Left>
      <Right
        summary={summary}
      ></Right>
    </div>
  );
}

Left.jsx

import Summary from "./Summary";

export default function Left({
  summary,
  setSummary,
}) {
  return (
    <div className="left">
      <Summary
        existingInfo={summary}
        setExistingInfo={setSummary}
      ></Summary>
    </div>
  );
}

Summary.jsx

export default function Summary({ existingInfo, setExistingInfo }) {
  const setSummaryToHey = () => {
    setExistingInfo("hey");
  };
  return (
    <form action="#" method="post" className="editSummaryBox">
      <label htmlFor="summaryInput">Summary</label>
      <textarea
        id="summaryInput"
        value={existingInfo}
        onClick={setSummaryToHey}
      ></textarea>
      <button type="submit" className="submitButton">
        Submit
      </button>
    </form>
  );
}

点击textarea后，其值并未变为"hey"。

完全可以把状态更新函数（比如setSummary）作为props层层传递给子组件调用，你的核心思路是正确的，问题出在代码的两个细节上：

1. 表单默认提交行为导致页面刷新：你的<form>标签设置了action="#"和method="post"，点击submit按钮会触发浏览器默认的表单提交逻辑，页面会刷新，之前修改的状态会被重置回初始值，所以看不到变化。
2. 事件触发后的状态更新被刷新覆盖：虽然点击textarea时已经调用setExistingInfo("hey")修改了状态，但页面立刻刷新，状态回到初始值，导致视觉上没有变化。

修复方案： #

修改Summary.jsx，阻止表单的默认提交行为，同时可以优化交互逻辑：

export default function Summary({ existingInfo, setExistingInfo }) {
  const setSummaryToHey = () => {
    setExistingInfo("hey");
  };

  // 阻止表单默认提交行为
  const handleSubmit = (e) => {
    e.preventDefault();
    // 这里可以添加表单提交的逻辑，比如保存数据等
  };

  return (
    <form onSubmit={handleSubmit} className="editSummaryBox">
      <label htmlFor="summaryInput">Summary</label>
      <textarea
        id="summaryInput"
        value={existingInfo}
        onClick={setSummaryToHey}
        // 可选：添加onChange实现实时输入更新
        onChange={(e) => setExistingInfo(e.target.value)}
      ></textarea>
      <button type="submit" className="submitButton">
        Submit
      </button>
    </form>
  );
}

额外说明： #

• 状态提升后，父组件的状态更新函数可以通过props传递给任意层级的子组件，只要在传递过程中正确接收和传递props即可（比如你的Left组件已经正确把setSummary传递给了Summary组件）。
• 如果你觉得多层传递props太繁琐，后续可以学习React的Context API或者状态管理库来简化跨组件状态传递，但目前你的场景用props传递完全足够。

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