React+TypeScript中无法将对象作为Props传递给组件问题

核心问题1：Review组件未正确导出 #

你提供的Review组件代码片段缺少导出语句，导致AddressForm组件导入的Review实际是undefined，渲染时无法接收传递的data props，最终打印出undefined。

核心问题2：useEffect未监听数据变化 #

你的useEffect依赖数组为空，只会在组件挂载时执行一次，后续输入框更新shipping状态后，data props更新但useEffect不会重新执行，无法看到最新数据。

修正后的Review组件代码 #

import { useEffect } from 'react';

interface ShippingProps {
  data: {
    firstname: string;
    lastname: string;
    address: string;
    city: string;
    state: string;
    postalcode: string;
    country: string;
  };
}

// 导出组件，确保AddressForm能正确导入
export default function Review({data}: ShippingProps) {

  // 添加data到依赖数组，监听数据变化
  useEffect(() => {
    console.log(data);
  }, [data])

  // 补充组件返回的JSX，用于展示数据
  return (
    <div>
      <h3>Shipping Review</h3>
      <p>Name: {data.firstname} {data.lastname}</p>
      <p>Address: {data.address}, {data.city}, {data.state} {data.postalcode}, {data.country}</p>
    </div>
  )
}

额外验证点 #

• 确认AddressForm中的import Review from './Review';路径正确，与Review组件文件位置匹配。
• 测试时可直接在Review组件函数体中打印console.log(data)，无需依赖useEffect，更直观验证props是否传递成功。

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