React映射组件向Updatepost传递props时数据为undefined求助

问题核心 #

你遇到的主要问题是函数组件错误使用this，以及可能存在的props接收逻辑疏漏。

修复步骤 #

1. 修正Post组件的props传递代码
   Post是函数组件，不存在this对象，this.post完全无效，需直接使用解构得到的post变量：

// 错误写法
{openUpdate && <Updatepost setOpenUpdate={setOpenUpdate} post={this.post} />}

// 正确写法
{openUpdate && <Updatepost setOpenUpdate={setOpenUpdate} post={post} />}

2. 确保Updatepost组件正确接收props
   检查Updatepost组件的props接收方式，两种正确写法示例：

• 解构写法：

const Updatepost = ({ post, setOpenUpdate }) => {
  console.log("接收的帖子数据:", post); // 验证数据是否存在
  // 后续更新逻辑
  return <div>更新组件内容</div>;
};

• 直接使用props对象：

const Updatepost = (props) => {
  console.log("接收的帖子数据:", props.post);
  // 后续更新逻辑
  return <div>更新组件内容</div>;
};

3. 添加数据存在性校验（可选但推荐）
   避免在post数据未加载完成时传递undefined，增加条件判断：

{openUpdate && post && <Updatepost setOpenUpdate={setOpenUpdate} post={post} />}

4. 验证Post组件是否接收到有效数据
   在Post组件开头添加日志，确认上游数据是否正常传递：

const Post = ({ post }) => {
  console.log("Post组件接收到的数据:", post); // 检查输出是否为有效对象
  // 其他状态与逻辑
};

如果此处post为undefined，需检查Posts组件中useQuery返回的data结构是否正确，确认map遍历的每个item是完整的帖子对象。

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