单个帖子 api 数据未在反应 js 中呈现

Question

我是 react-hooks 的新手。我已经成功地加载了来自 api 的所有对象。但是当我尝试加载单个帖子时，它只呈现 id=1 的对象。我在后端数据库中有 3 条数据。

我在 useEffect 函数中使用 Axios。

我的美食页面：

function Food() {

  const [food, setFood] = useState([])
  const [id,setId] = useState(1)

  useEffect(() => {
    axios.get(`https://texas-crm1.herokuapp.com/api/menus/${id}`)
    .then(abc=>{
      console.log(abc.data)
      // console.log(abc.data.id);
      setFood(abc.data)
    })
    .catch(err =>{
      console.log(err) 
    })
  }, [])


 return (
  <div>
    <div className="food-page">   
      
       <PageHeader  {...food} key={food.id} />;       
       <Customize />
       <FoodDescription  {...food} key={food.id} />;
    </div>
  </div>
  );
}

export default Food;

在这里，最初，我将状态设置为 id =1。我被困住了如何改变状态。这就是为什么在每个食物描述中只呈现 id=1。

我的食物描述：

function FoodDescription(props) {

  const [quantity,setQuantity] = useState(0)
  // let quantity = 0;

  const handleDecrement = () => {
    if (quantity > 0){
      setQuantity((prev) => prev - 1);
    }
    else {
            setQuantity(0);
          }   
      
  };

  const handleIncrement = () => {
    setQuantity((prev) => prev + 1);
  };

  console.log(props);
  const {food_name,long_title,subtitle,description,price,id} = props;

  return (
    <div className="food-description">
        <div className="container">
          <div className="title">
            <div className="main-title">{food_name}</div>
          </div>
          <div className="description">
            {/* {description.map((des: string, index: number) => { */}
            {/* {description.map((des, index) => {  
              return <p key={index}>{des}</p>;
            })} */}
            {description}
            {/* <div  dangerouslySetInnerHTML="description">{description}</div> */}
          </div>
          <div className="order">
            <div className="quantity">
              {/* <div className="negative" onClick={() => this.handleDecrement()}>
                -
              </div>
              {this.state.quantity}
              <div className="positive" onClick={() => this.handleIncrement()}>
                +
              </div> */}
              <div className="negative" onClick={handleDecrement}>-</div>
                {quantity}
              <div className="negative" onClick={handleIncrement}>
                +
              </div>
            </div>
            <ExploreButton active="link-active">
              Add to Order - ${price}
            </ExploreButton>
          </div>
        </div>
      </div>
  )
}


export default FoodDescription;

这里有三种不同的食物。但是当我点击其中任何一个时，Fooddescription 页面中只呈现 id=1。

更新：

包含立即购买的点击按钮的组件。

我的 MenuComponent.txs

const MenuComponent = (props: any) => {
   console.log(props);
   
  const {id,category, image,price,rating,food_name,description} = props;
  // const starterMenu = starter.map
  const starterMenu = [
    {
      id :id,
      thumbnail: image,
      title: category,
      rating: rating,
      description:description,       
      price: price,
    },
    {
      id :id,
      thumbnail: image,
      title: category,
      rating: rating,
      description:description,
      price: price,
    },
    {
      id :id,
      thumbnail: image,
      title: category,
      rating: rating,
      description:description,        
      price: price,
    },
    {
      id :id,
      thumbnail: image,
      title: category,
      rating: rating,
      description:description,
      price: price,
    },
  ];

  const renderMenuList = () => {
    switch (props.category) {
      case "starters":
        return <Starters />;

      case "main courses":
        return <MainCourses />;

      case "soups & salads":
        return <SoupsSalads />;

      case "sliders":
        return <Sliders />;

      default:
        break;
    }
  };

  return (
    <div className="menu-component">
      <div className="title">
        <div className="main-title">{props.category}</div>
      </div>
      <div className="menu-cards">
        {starterMenu.map((starterItem, index) => {
          return <MenuCard {...starterItem} key={index} />;
        })}
      </div>
      {renderMenuList()}
    </div>
  );
};

export default MenuComponent;

道具被传递给 MenuCard。我的 MenuCard 如下：

const MenuCard = (props: any) => {
  console.log(props);
  return (
    // Menu card
    <div className="menu-card">
      <div className="container">
        {/* Thumbnail */}
        <div className="thumbnail">
          <img src={props.thumbnail} alt={props.title} />
        </div>

        {/* Title */}
        <div className="title">{props.title}</div>

        {/* Star rating */}
        <div className="rating">
          <StarRating rating={props.rating} />
        </div>

        {/* description */}
        <div className="description">{props.description}</div>

        <div className="bottom">
          {/* price */}
          <div className="price">{props.price}</div>
          <Link to={`/menu/${props.id}`}>
            <MenuButton highlighted="highlighted">Buy Now</MenuButton>
          </Link>
        </div>
      </div>
    </div>
  );
};

export default MenuCard;

更新：2

当我进入菜单时，它会显示所有食品，当我点击其中一个购买时，现在它会在 url 中显示正确的 id。但仍会显示 id=1 的食物详情。

Answer 1

我假设当您点击 Buy Now 时，您点击了呈现 <Food /> 的路线 /menu/:someId。

由于所选菜单的 id 在 URL 中，我们可以使用 useParams 挂钩来获取 id 并触发 API 调用。您当前的代码不起作用，因为无论您单击的菜单卡如何，您都将始终触发 id 1 的 API 调用。正如你已经硬编码它。因此，要使其动态化，您可以这样做

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

function Food() {
  const [food, setFood] = useState([]);

  // if your route is /menu/:menuId 
  const { menuId } = useParams();

  useEffect(() => {
    axios
      .get(`https://texas-crm1.herokuapp.com/api/menus/${menuId}`)
      .then((abc) => {
        console.log(abc.data);
        // console.log(abc.data.id);
        setFood(abc.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      <div className="food-page">
        <PageHeader {...food} key={food.id} />;
        <Customize />
        <FoodDescription {...food} key={food.id} />;
      </div>
    </div>
  );
}

参考

useParams Hook