React+JSON Server问题：编辑按钮新增条目，新增商品链接失效求助

问题1：编辑按钮触发新增操作 #

核心原因 #

1. 未读取URL中的productId参数，无法识别编辑模式
2. 表单提交时直接调用addProduct，未执行新增/编辑的判断逻辑
3. 名称输入框的value绑定错误，导致编辑时无法加载原有产品名称，也无法正确收集字段值
4. 初始state中id设为空字符串，破坏了新增/编辑的判断条件

修复代码（修改ProductForm.js） #

import { useParams, useNavigate } from 'react-router-dom';

function ProductForm() {
  // 获取URL中的productId参数
  const { productId } = useParams();
  
  // 初始化state：新增时id为undefined，编辑时后续覆盖
  let [product, setProduct] = useState({
    id: undefined,
    productName: "",
    description: "",
    price: "",
  });

  let { getProduct, addProduct, updateProduct } = useContext(ProductContext);
  let navigate = useNavigate();
  let { id, productName, description, price } = product;

  useEffect(() => {
    // 编辑模式下加载对应产品数据
    if (productId) {
      async function fetchProduct() {
        const fetchedProduct = await getProduct(productId);
        setProduct(fetchedProduct);
      }
      fetchProduct();
    }
  }, [productId, getProduct]);

  function handleChange(event) {
    setProduct((preValue) => {
      return { ...preValue, [event.target.name]: event.target.value };
    });
  }

  function addOrUpdate() {
    return id === undefined ? addProduct(product) : updateProduct(product);
  }

  function handleSubmit(event) {
    event.preventDefault();
    // 调用判断逻辑，根据模式执行新增/更新
    addOrUpdate().then((savedProduct) => {
      navigate(`/products/${savedProduct.id}`);
    });
  }

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group className="mb-3">
        <Form.Label>Name</Form.Label>
        <Form.Control
          type="text"
          name="productName"
          value={product.productName} {/* 修正绑定字段 */}
          onChange={handleChange}
        />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>Description</Form.Label>
        <Form.Control
          type="text"
          name="description"
          value={product.description}
          onChange={handleChange}
        />
      </Form.Group>
      <Form.Group className="mb-3">
        <Form.Label>Price</Form.Label>
        <Form.Control
          type="text"
          name="price"
          value={product.price}
          onChange={handleChange}
        />
      </Form.Group>
      <Button type="submit">Save</Button>
    </Form>
  );
}

export default ProductForm;

问题2：新增商品链接无法跳转至表单页面 #

核心原因 #

Home.js中新增商品的链接路径与App.js定义的路由不匹配，导致触发404页面。

修复代码（修改Home.js） #

function Home() {
  return (
    <>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Nav className="me-auto">
            <Link to="/" className="nav-link">Home</Link>
            <Link to="/products" className="nav-link">Products</Link>
            {/* 修正路径为路由定义的/products/new */}
            <Link to="/products/new" className="nav-link">New Product</Link>
          </Nav>
        </Container>
      </Navbar>
      <Stack gap={3} className="col-md-10 mx-auto mt-3">
        <Outlet />
      </Stack>
    </>
  )
}

export default Home

额外验证点 #

• 确认ProductContext中的updateProduct函数正确发送PUT请求到JSON Server（如http://localhost:3000/products/${id}）
• 确认getProduct函数能通过productId正确获取产品数据

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