React餐厅评分项目类组件转函数组件报错排查

你的函数组件改写存在以下6个核心问题：

• 路由参数未正确获取：虽然引入了useParams但未调用，id初始值为null，请求目标地址错误
• fetch请求语法错误：请求路径写为'http://localhost:3000/restaurant' / +id，属于非法运算，正确路径需要用字符串拼接或模板字符串生成
• 状态更新API误用：函数组件不存在this.setState方法，每个独立state需要调用对应的setter函数更新
• 方法引用错误：函数组件没有this实例，this.update()属于无效调用，方法直接定义在组件作用域内即可
• 受控组件绑定缺失：输入框未绑定value属性到对应state，输入内容无法和状态同步
• useEffect依赖配置错误：初始请求的useEffect依赖设为空数组，执行时id还未赋值，请求永远拿不到正确数据

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import NavBarManu from './NavBarManu'

const RestaurantUpdate = () => {
  // 直接从路由获取餐厅id，无需额外存入state
  const { id } = useParams();
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [address, setAddress] = useState('');
  const [rating, setRating] = useState('');

  // 等价componentDidMount，id存在时拉取餐厅详情
  useEffect(() => {
    if (!id) return;
    fetch(`http://localhost:3000/restaurant/${id}`)
      .then(response => response.json())
      .then(result => {
        console.log('接口返回原始数据:', result);
        setName(result.name);
        setEmail(result.email);
        setAddress(result.address);
        setRating(result.rating);
      })
  }, [id]);

  // 监听所有状态变化，打印最新值
  useEffect(() => {
    console.table({ id, name, email, address, rating });
  }, [id, name, email, address, rating]);

  // 提交更新方法
  const handleUpdate = () => {
    fetch(`http://localhost:3000/restaurant/${id}`, {
      method: "PUT",
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ id, name, email, rating, address })
    }).then(result => {
      result.json().then(() => {
        alert("餐厅信息已更新");
      })
    })
  }

  return (
    <div>
      <NavBarManu />
      <h1>Restaurant Update</h1>
      <div>
        <input
          onChange={e => setName(e.target.value)}
          placeholder="Restaurant Name"
          value={name}
        /> <br /><br />
        <input
          onChange={e => setEmail(e.target.value)}
          placeholder="Restaurant Email"
          value={email}
        /> <br /><br />
        <input
          onChange={e => setRating(e.target.value)}
          placeholder="Restaurant Rating"
          value={rating}
        /> <br /><br />
        <input
          onChange={e => setAddress(e.target.value)}
          placeholder="Restaurant Address"
          value={address}
        /> <br /><br />
        <button onClick={handleUpdate}>Update Restaurant</button>
      </div>
    </div>
  );
};

export default RestaurantUpdate;

补充说明：
不要在函数组件中混用类组件的this、setState、生命周期写法，hooks的逻辑完全基于函数作用域实现；路由参数通过useParams拿到后可以直接使用，不需要额外同步到state，避免冗余状态导致的不同步问题。

内容的提问来源于stack exchange，提问作者Anish Kumar Mohanty