React中从父组件更新子组件的技术实现问询

核心问题分析 #

1. 字段匹配失败：父组件templateData中每个项的name字段末尾多了逗号（比如"template,"），但子组件services中的name是无逗号的格式（比如"template"），导致过滤条件完全不匹配。
2. 语法错误：子组件代码里存在未完成的cl代码行，会引发语法报错。

修正方案 #

1. 修正父组件的name字段

将templateData中所有name值的末尾逗号删除，确保和子组件的name格式一致：

const templateData = [
  {
    title: "Saved Templates",
    description: "Payments that you made most frequently",
    icon: "material-symbols:add-circle",
    name: "template",
  },
  {
    title: "Mobile Networks",
    description: "Payments that you made most frequently and Instantly",
    icon: "material-symbols:add-circle",
    name: "network",
  },
  {
    title: "Utilities",
    description: "Check your home utility bulls and pay them",
    icon: "material-symbols:delete",
    name: "utilities",
  },
  {
    title: "Mobile Networks",
    description: "Payments that you made most frequently and Instantly",
    icon: "material-symbols:add-circle",
    name: "network",
  },
  {
    title: "Utilities",
    description: "Check your home utility bulls and pay them",
    icon: "material-symbols:delete",
    name: "bills",
  },
];

2. 修正子组件的语法错误并优化体验

删除多余的cl代码行，同时增加无选择/无匹配时的提示文案，提升用户体验：

import React from "react";

const Products = ({ selectedItem }) => {
  const services = [
    {
      img: "https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/amazon-512.png",
      price: "$150.00",
      title: "Car engine oil",
      name: "template",
    },
    {
      img: "https://cdn0.iconfinder.com/data/icons/internet-2020/1080/Applemusicandroid-512.png",
      price: "$150.00",
      title: "Car engine oil",
      name: "bills",
    },
    {
      img: "https://external-preview.redd.it/o8kVY3bH8eg0xdABo5jp3zhColLY_gcYCpOoR6gy1sU.jpg?auto=webp&s=1c0c075f0b1c314e61a932d5a5319e31ddf2efbe",
      price: "$150.00",
      title: "Car engine oil",
      name: "template",
    },
    {
      img: "https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,f_auto,q_auto:eco,dpr_1/ovcsxjuvmzshxivkwa6y",
      price: "$150.00",
      title: "Car engine oil",
      name: "network",
    },
    {
      img: "https://cdn-icons-png.flaticon.com/512/3670/3670174.png",
      price: "$150.00",
      title: "Car engine oil",
      name: "template",
    },
    {
      img: "https://w7.pngwing.com/pngs/779/408/png-transparent-airbnb-circle-round-icon-travel-popular-services-brands-vol-icon.png",
      price: "$150.00",
      title: "Car engine oil",
      name: "utilities",
    },
    {
      img: "https://external-preview.redd.it/o8kVY3bH8eg0xdABo5jp3zhColLY_gcYCpOoR6gy1sU.jpg?auto=webp&s=1c0c075f0b1c314e61a932d5a5319e31ddf2efbe",
      price: "$150.00",
      title: "Car engine oil",
      name: "utilities",
    },
    {
      img: "https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/amazon-512.png",
      price: "$150.00",
      title: "Car engine oil",
      name: "bills",
    },
    {
      img: "https://cdn0.iconfinder.com/data/icons/internet-2020/1080/Applemusicandroid-512.png",
      price: "$150.00",
      title: "Car engine oil",
      name: "network",
    },
  ];

  const filteredItems = services.filter(
    (item) => item.name === selectedItem?.name
  );

  // 初始无选择时的提示
  if (!selectedItem) {
    return <div className="text-center py-8">请选择左侧的服务分类</div>;
  }

  // 无匹配项时的提示
  if (filteredItems.length === 0) {
    return <div className="text-center py-8">该分类下暂无服务</div>;
  }

  return (
    <div className="grid md:grid-cols-3 grid-cols-1 gap-5 ">
      {filteredItems.map((item, i) => (
        <div
          key={i}
          className="bg-slate-50 dark:bg-slate-900 p-4 rounded text-center cursor-pointer group"
        >
          <div className="h-12 w-12  mb-4 mx-auto relative rounded-full">
            <img
              src={item.img}
              alt={item.title}
              className="w-full h-full rounded-full group-hover:scale-110 transition-all duration-300 bg-purple-200"
            />
          </div>
          <span className="text-slate-900 dark:text-slate-300 text-sm mb-2 block font-medium">
            {item.title}
          </span>
          <span className="text-pink-600 dark:text-pink-600 text-sm mb-1 block font-normal bg-pink-200 p-1">
            {item.price}
          </span>
        </div>
      ))}
    </div>
  );
};

export default Products;

额外优化建议 #

• 给img标签添加alt属性，优化页面可访问性
• 父组件列表循环的key建议使用唯一标识（比如给templateData添加id字段），避免用index作为key，防止列表更新时出现渲染异常

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