即使正确传递 Props 后仍存在未定义的值

Question

我正在尝试获取数据，然后将辅导数据作为道具传递给另一个组件，以便我应该在 FE 上渲染我想将道具传递给 coachingCard Compoenet，以便我可以使用辅导值在前端显示

但是 props 未定义

 const [coaching, setCoaching] = useState([]);
 
  const fetchData = async () => {
    try {
      const response = await Service.getCoaching();
      console.log(response.data.coachings);
      setCoaching(response.data.coachings);
    } catch (error) {
      console.error("Error fetching Coaching:", error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

<div className="flex space-y-6 flex-col">
     
        {coaching?.map((coachingItem) => (
          
          <CoachingCard
            // key={coachingItem.name}
            fees={coachingItem.fees}
            url={coachingItem.url}
            name={coachingItem.name}
            programme={coachingItem.programme}
            location={coachingItem.city}
            ratings={coachingItem.ratings} // Pass the ratings value
            fetchAndUpdateData={fetchAndUpdateData}
          />
        ))}
      </div>

import { Rating } from "@mui/material";
import Image from "next/image";
import React from "react";
import { FaRegEdit } from "react-icons/fa";
import { RiDeleteBinFill } from "react-icons/ri";

type CoachingCardProps = {
  name: string;
  url: string;
  location: string;
  programme: string;
  fees: string;
  ratings: string; // Add ratings prop
  fetchAndUpdateData: () => void;
};

const CoachingCard: React.FC<CoachingCardProps> = ({
  name,
  url,
  location,
  programme,
  fees,
  ratings, // Receive ratings prop
  fetchAndUpdateData,
}: CoachingCardProps) => {
  console.log("name:", name);
  console.log("url:", url);
  console.log("location:", location);
  console.log("programme:", programme);
  console.log("fees:", fees);
  console.log("ratings:", ratings);
  return (
    <div className="flex md:flex-row flex-col space-y-4 md:space-y-0 px-5 py-2 justify-between bg-white">
      <div className="flex space-x-3  w-full ">
        <div className="">
          <Image src={url} alt="coaching image" width={100} height={100} />
        </div>
        <div className="flex space-y-2 flex-col">
          <h1 className="text-lg font-bold">{name}</h1>
          <p className="flex font-medium  text-xs text-[#7B7B7B]">
            <p>{location}</p>
            <span className="mx-1">•</span>
            <p>{programme}</p>
          </p>

          <p className="font-medium  text-xs text-[#7B7B7B]">
            Fees : {fees} INR
          </p>
        </div>
      </div>
      <div className="flex space-y-3 flex-col">
        <Rating name="fullRating" value={parseFloat(ratings)} precision={0.5} readOnly /> {/* Render the Rating component with ratings value */}
        <div className="flex justify-evenly ">
          <div
            className="flex w-8 h-8  rounded-full bg-[#F8FAFB]  justify-center items-center cursor-pointer"
            onClick={fetchAndUpdateData}
          >
            <FaRegEdit size={18} className="text-[#828282]" />
          </div>
          <div className="flex w-8 h-8  rounded-full bg-[#F8FAFB]  justify-center items-center cursor-pointer">
            <RiDeleteBinFill size={18} className="text-[#828282]" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default CoachingCard;

我希望我的数据应该正确传递到另一个组件，以便我在 FE 上成功可见

Answer 1

请检查您从中获取数据的组件。看来您设置为

response.data.coaching

的

coaching

是一个对象，因此需要将其括在方括号

[]

中。此外，您似乎没有在组件中返回 JSX。我相信进行这些更改可以修复该错误。

看看这个：

    const [coaching, setCoaching] = useState([]);

  const fetchData = async () => {
    try {
      const response = await Service.getCoaching();
      console.log(response.data.coachings);
      setCoaching([response.data.coachings]); //  <----- Here, put this "response.data.coachings" in a square bracket
    } catch (error) {
      console.error("Error fetching Coaching:", error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    // <---- Also check it is like you omitted this return key
    <div className="flex space-y-6 flex-col">
      {coaching?.map((coachingItem) => (
        <CoachingCard
          // key={coachingItem.name}
          fees={coachingItem.fees}
          url={coachingItem.url}
          name={coachingItem.name}
          programme={coachingItem.programme}
          location={coachingItem.city}
          ratings={coachingItem.ratings} // Pass the ratings value
          fetchAndUpdateData={fetchAndUpdateData}
        />
      ))}
    </div>
  );