React中如何正确渲染Firebase的Slider数组数据？求助

问题根源 #

你的Firebase数据结构中，/home1节点下包含一个名为slider的数组，但当前代码错误地将home1的直接子节点（键为slider的键值对）转换为数组，而非直接处理slider对应的数组内容。

修正代码 #

修改useEffect中的数据处理逻辑，直接提取snapshot.val()里的slider数组：

useEffect(()=>{
  const usersRef = ref(database,'home1')
  get(usersRef).then((snapshot) => {
    if(snapshot.exists()){
      // 直接获取slider数组，而非处理整个home1对象
      const sliderData = snapshot.val().slider;
      sethome1(sliderData);
    }else{
      console.log('no data available');
    }
}).catch((error)=>{
  console.error(error);
});
},[]);

原代码问题解析 #

原代码中Object.entries(snapshot.val())会将{slider: [数组内容]}转换为仅含一个元素的数组：["slider", [你的图片数组]]，经过map处理后得到的对象结构为：

{
  id: "slider",
  0: {"id":"1","name":"first",...},
  1: {"id":"2","name":"second",...},
  // ... 其他数组索引对应的元素
}

这就导致你遍历home1时，product.id是slider，而product.name不存在（因为name在索引对应的对象里），最终输出undefined。

完整修正后的组件代码 #

export default function Patiss() {
  const [home1, sethome1] = useState([]);
  const navigate = useNavigate();

  useEffect(()=>{
    const usersRef = ref(database,'home1')
    get(usersRef).then((snapshot) => {
      if(snapshot.exists()){
        const sliderData = snapshot.val().slider;
        sethome1(sliderData);
      }else{
        console.log('no data available');
      }
    }).catch((error)=>{
      console.error(error);
    });
  },[]);

  const Keti = () =>{
    navigate("/");
  };

  return (
    <div className="mx-auto max-w-2xl px-4 py-2">
      <div className="mt-10 grid grid-cols-1">
        {home1.map((product, index) => {
          console.log(product); 
          console.log(product.id); 
          console.log(product.name); 
          return (
            <div 
              key={index} 
              className="productDisplay"
              onClick={() => navigate(`/home1/${product.id}`)}
            >
              {/* 这里可以添加渲染内容，比如图片和名称 */}
              <img src={product.url} alt={product.name} />
              <p>{product.name}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

验证效果 #

修改后，home1将直接存储Firebase中slider数组的所有元素，遍历每个product时：

• product.id会输出1、2等正确的ID
• product.name会输出first、second等正确名称
• product.url也能正常访问，可用于渲染图片

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