React中如何将Inventory组件的API数据传递给ProductEditForm组件

步骤1：在Inventory组件中传递product作为props #

在Inventory.js里引入ProductEditForm组件，渲染时把product作为属性传递给子组件：

// Inventory.js
import { useState, useEffect } from 'react';
import axios from 'axios';
import { ProductEditForm } from './ProductEditForm'; // 引入子组件

export function Inventory() {
  const url = "http://localhost:8080/api/inventory/products";
  const [product, setProduct] = useState(null);

  useEffect(() => {
    axios
      .get(url)
      .then((response) => {
        setProduct(response.data);
      });
  }, [url]);

  return (
    <div>
      {/* 将product通过props传递给ProductEditForm */}
      <ProductEditForm onSubmit={/* 此处传入你的表单提交逻辑 */} product={product} />
    </div>
  );
}

步骤2：在ProductEditForm组件中接收并使用product #

修改ProductEditForm.js的参数，添加product属性，同时处理product未加载完成的情况（避免空值报错）：

// ProductEditForm.js
export const ProductEditForm = ({ onSubmit, product }) => {
  // 当product还未获取到数据时，显示加载提示
  if (!product) {
    return <div>加载中...</div>;
  }

  console.log(product); // 现在可以正常打印数据了

  return (
    <form onSubmit={onSubmit}>
      {/* 示例：使用product数据渲染表单字段 */}
      <div>
        <label>商品名称：</label>
        <input type="text" defaultValue={product.name} />
      </div>
      {/* 更多表单字段根据你的数据结构添加 */}
      <button type="submit">保存修改</button>
    </form>
  );
};

补充说明 #

• 这是React中最基础的父子组件数据传递方式，通过props实现
• 必须处理product初始为null的情况，否则在API请求完成前渲染表单会触发空值读取错误
• 如果后续需要在更多组件间共享这份数据，可以考虑使用Context API或状态管理库（如Redux），但当前场景用props传递是最直接高效的方案

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