React中通过子组件更新父组件状态的问题

1. 确保正确调用父组件的状态更新函数 #

props是只读的，绝对不能直接修改remarks props，必须通过传入的setRemarks函数更新状态：

// 错误：直接修改props
props.remarks = "新的备注内容";

// 正确：调用状态更新函数
props.setRemarks("新的备注内容");

2. 检查props传递是否准确 #

确认父组件App.tsx中确实把setRemarks和remarks传递给了RemarksView：

// App.tsx 示例代码
import { useState } from 'react';
import RemarksView from './RemarksView';

function App() {
  const [remarks, setRemarks] = useState("初始备注");

  return (
    <div>
      <RemarksView remarks={remarks} setRemarks={setRemarks} />
      <p>父组件显示：{remarks}</p>
    </div>
  );
}

3. 避免子组件内的同名状态覆盖props #

如果子组件RemarksView.tsx自己声明了同名的remarks状态，会覆盖父组件传入的props，导致调用的是子组件自身的状态更新函数：

// 错误：子组件内重复声明状态，覆盖父组件props
const [remarks, setRemarks] = useState("");

// 正确：直接使用父组件传入的props
export default function RemarksView({ remarks, setRemarks }) {
  // ...
}

4. 注意React状态更新的异步特性 #

React状态更新是异步的，调用setRemarks后立刻打印remarks可能看不到最新值，可以通过useEffect监听状态变化确认是否更新：

// App.tsx 中添加监听
useEffect(() => {
  console.log("父组件remarks已更新：", remarks);
}, [remarks]);

5. 受控组件的正确写法（表单场景） #

如果子组件是输入类组件，需要绑定父组件的remarks作为输入值，并在onChange事件中调用setRemarks：

// RemarksView.tsx 示例代码
interface RemarksProps {
  remarks: string;
  setRemarks: (value: string) => void;
}

export default function RemarksView({ remarks, setRemarks }: RemarksProps) {
  return (
    <textarea
      value={remarks}
      onChange={(e) => setRemarks(e.target.value)}
      placeholder="输入备注..."
    />
  );
}

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