React父组件向子组件传递变量Prop失败问题排查

问题根源 #

你用let声明的普通变量rowIdToSend，React不会追踪它的变化。当你在handleSingleRowSelection里修改这个变量时，组件不会重新渲染，子组件Child接收的rowsToModify还是旧值，所以读取不到预期的ID。

修复后的父组件代码 #

import { useState } from 'react';

const SalesTable = () => {
  // 用useState声明状态变量，替代普通let变量
  const [rowIdToSend, setRowIdToSend] = useState([]);

  const handleSingleRowSelection = (event, id) => {
    if (event.target.checked) {
      // 用setter函数更新状态，触发组件重渲染
      setRowIdToSend(id);
      console.log("selected rows", id);
    } else {
      // 取消选中时清空状态
      setRowIdToSend([]);
      console.log("selected rows", []);
    }
  };

  return (
    <Child rowsToModify={{ greeting: rowIdToSend }} />
  );
};

子组件代码（无需修改） #

const Child = ({ rowsToModify }) => {
  const unknown = rowsToModify;

  const displaymylog = () => {
    console.log('received');
    console.log(unknown.greeting);
  };

  return (
    <div className="buttonGroup">
      <button onClick={displaymylog}>Update</button>
      <button>Delete</button>
    </div>
  );
};

export default Child;

关键说明 #

• React函数组件中，只有状态变量（useState/useReducer）或props变化才会触发组件重新渲染，普通变量的修改不会触发更新。
• 必须使用setRowIdToSend这类状态更新函数来修改状态，直接赋值普通变量对React的渲染机制无效。
• 原代码里未声明的selectedRows变量已替换为正确的状态清空逻辑。

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