React中useEffect状态变更时未重新加载子组件的问题

组件层级结构 #

• ParentContainer：从Redux获取数据，传递给ParentComponent
• ParentComponent：包含MyHeader和MyTable两个子组件，将数据分别传递给它们
• MyTable：内部包含模态框组件和表格组件，负责触发模态框、处理输入并发送PUT请求

代码示例 #

const ParentContainer = (): JSX.Element => {
  const dataToPassDown = useSelector((state: IRootState) => selectData(state));
  return (
    <ParentComponent data={dataToPassDown} />
  )
}

const ParentComponent = (props): JSX.Element => {
  const { data } = props;
  // 注意：JSX只能返回单个元素，需用Fragment包裹
  return (
    <>
      <MyHeader data={data} />
      <MyTable data={data.tableData} />
    </>
  )  
}

const MyTable = (props): JSX.Element => {
  const { data } = props;
  const [inputFromModal, setInputFromModal] = useState("");
  const [modalVisible, setModalVisible] = useState(false); // 新增控制模态框显示的状态
  const dispatch = useDispatch();
  
  useEffect(() => {
    // 修正：putRequest调用缺少闭合括号，增加空值判断避免无效请求
    if (inputFromModal) {
      dispatch(putRequest(inputFromModal));
    }
  }, [inputFromModal]);

  // 注意：JSX只能返回单个元素，需用Fragment包裹
  return (
    <>
      <Modal 
        visible={modalVisible} 
        updateInputValue={setInputFromModal}
        onClose={() => setModalVisible(false)}
        onConfirm={() => {
          // 提交后关闭模态框，inputFromModal变更会触发useEffect发送请求
          setModalVisible(false);
        }}
      />
      <Table dataSource={data} />
    </>
  )  
}

问题描述 #

希望模态框关闭时仅刷新表格组件，但当前inputFromModal状态变更时，useEffect触发了PUT请求，表格却没有重新加载，疑惑是否误解了useEffect与组件重新渲染的逻辑。

问题解析与解决方案 #

1. 核心逻辑澄清：useEffect不直接触发组件重新渲染 #

useEffect是副作用钩子，仅在组件渲染完成后执行你定义的副作用代码（比如发送请求），它本身不会触发组件重新渲染。组件重新渲染的触发条件只有三个：

• 自身的state发生变化
• 接收的props发生变化
• 父组件重新渲染

2. 当前代码的核心问题 #

表格的数据源来自props.data，而props.data是父组件从Redux中获取的data.tableData。当你发送PUT请求后，如果Redux中的数据没有被更新，ParentContainer里的dataToPassDown就不会变化，MyTable的props.data也不会更新，自然表格不会重新渲染。

3. 具体修复步骤 #

• 更新Redux状态：确保PUT请求的action在请求成功后，同步更新Redux中对应的表格数据（比如修改data.tableData里的目标条目）。这样useSelector会检测到状态变化，ParentContainer重新渲染，MyTable的props.data更新，表格自动刷新。
• 手动触发数据拉取：如果后端PUT请求后需要重新获取最新数据，可以在PUT请求成功的回调中，dispatch一个获取表格数据的action（比如getTableData），强制刷新Redux中的数据。
• 修正模态框控制逻辑：原代码中Modal的visible固定为false，无法正常打开/关闭，需要新增modalVisible状态来控制显示隐藏，确保模态框能正常交互。
• 避免无效请求：在useEffect中增加空值判断，避免初始空值触发不必要的PUT请求。

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