React中如何持久化传递给子组件后更新的变量值？

架构老林

2026-7-29

问题分析与解决方案

核心问题定位

从代码和描述来看，导致子组件收到undefined的主要原因有两个：

子组件存在语法错误：console.log行后多余的{ contactIdentifier, contactList }属于无效代码，会干扰组件正常渲染逻辑，可能导致props读取异常。
跳转逻辑与状态设置的冲突：select元素同时绑定了onChange和onClick，选择选项时先触发状态更新，随即触发页面跳转，导致当前组件（包括子组件）被卸载，后续的undefined日志大概率是组件卸载过程中的异常输出，或是跳转后返回时组件重新挂载、状态重置导致的。

另外，你使用useMemo的方向有误——它是用来缓存计算结果、优化重渲染的，并非用来持久化状态，所以解决不了状态丢失的问题。

具体修复步骤

1. 修复子组件语法错误并简化优化

删掉无效代码，直接用React.memo包裹组件即可（因为contactIdentifier是简单数字类型，浅比较就能生效）：

import React from 'react'

const CollectionPortfolioFollowUps = ({ contactIdentifier }) => {
  console.log("收到的Contact ID: " + contactIdentifier);

  return (
    <div>
      <p>Contact ID: {contactIdentifier}</p>
    </div>
  )
}

export default React.memo(CollectionPortfolioFollowUps);

2. 调整跳转逻辑，避免状态与跳转冲突

如果子组件是在当前页面展示，不需要跳转：直接移除select上的onClick={handleNavigation}，只保留onChange处理状态更新。

如果选择选项后需要跳转到目标页面，把导航逻辑整合到onChange中，仅在选择有效ID时触发：

<SelectOptions
  onChange={(e) => {
    const selectedValue = parseInt(e.target.value);
    // 仅处理有效ID的情况
    if (!isNaN(selectedValue)) {
      console.log("Selected Value: " + selectedValue);
      setSelectedContactId(selectedValue);
      // 选择有效选项后再跳转
      handleNavigation(e);
    } else {
      // 选择默认选项时重置状态
      setSelectedContactId(0);
    }
  }}
>
  <option>[Ir a...]</option>
  <option value={contact.map.id} data-url="/followUp">
    Seguimiento
  </option>
</SelectOptions>

3. 修复父组件`useEffect`依赖缺失

把currentPage加入依赖数组，避免闭包导致的旧值问题，确保分页变化时能正确获取最新列表：

useEffect(() => {
  getContactList(currentPage)
}, [currentPage])

4. 优化状态初始化（可选）

如果业务中contactId可能为0，建议把初始状态设为null，更清晰区分“未选择”和“选择了ID为0的项”：

const [selectedContactId, setSelectedContactId] = useState(null);

// 对应条件渲染调整
{selectedContactId !== null && contactList && (
  <CollectionPortfolioFollowUps 
    contactIdentifier={selectedContactId} 
  />
)}

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