Javascript 如何在React JS中通过组件中的对象数组中的道具显示信息

我有两个文件，ListCurses和CardCurses，在ListCurses中有一个对象数组，我试图运行它并通过props在另一个组件（CardCurses）中显示信息，但页面返回此错误消息“TypeError:无法读取未定义的属性'props'。如果有人能帮助我，我将不胜感激，谢谢

CardCurses.jsx

import React, { Component } from "react";
import { Card } from "antd";

const { Meta } = Card;

function CardCurses() {
   return (
     <Card
        hoverable
        style={{ width: 200, height: 240, padding: "10px" }}
        cover={<img alt="example" src={this.props.text.image} />}
     >
        <Meta
           title={this.props.text.title}
           description={this.props.text.descricao}
        />
     </Card>
  );
}

export default CardCurses;

import React，{Component}来自“React”；
从“antd”导入{Card}；
const{Meta}=卡片；
函数CardCurses（）{
返回(
);
}
导出默认卡片；

列表诅咒

import React from "react";
import Card from "../CardCurses/CardCurses";

function ListCurses() {
   const cursos = [
    {
      title: "React JS",
      descricao: "React é legal",
      image: "https://pt-br.reactjs.org/logo-og.png"
    },
    {
      title: "React Native",
      descricao: "React Native é legal",
      image: "https://miro.medium.com/max/1000/1*GkR93AAlILkmE_3QQf88Ug.png"
    },
    {
      title: "Antd",
      descricao: "Antd é legal",
      image: "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
    }
  ];

  const returnCurses = cursos.map((curse, i) => {
  return (
      <div key={i}>
        <Card text={curse} />
      </div>
    );
  });
  return <div>{returnCurses}</div>;
}


export default ListCurses;

从“React”导入React；
从“./CardCurses/CardCurses”导入卡片；
函数ListCurses（）{
常量游标=[
{
标题：“反应JS”，
descripcao:“Reactélegal”，
图像：“https://pt-br.reactjs.org/logo-og.png"
},
{
标题：“反应本机”，
descripcao：“React Nativeélegal”，
图像：“https://miro.medium.com/max/1000/1*GkR93AAlILkmE_3QQf88Ug.png“
},
{
标题：“Antd”，
描述：“Antdélegal”，
图像：“https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
}
];
const returnCurses=cursos.map（（curse，i）=>{
返回(
);
});
return{returnCurses}；
}
导出默认列表；

您尚未在此处定义任何道具：

函数CardCurses（）{…} 你需要：

函数CardCurses（props）{…}

此外，您正在混合函数和类组件。功能组件没有此。因此：

function CardCurses(props) {
   return (
     <Card
        hoverable
        style={{ width: 200, height: 240, padding: "10px" }}
        cover={<img alt="example" src={props.text.image} />}
     >
        <Meta
           title={props.text.title}
           description={props.text.descricao}
        />
     </Card>
  );
}

同：

() => whatever

所以你可以：

const returnCurses = cursos.map((curse, i) => (
  <div key={i}>
    <Card text={curse} />
  </div>
));

const returnCurses=cursos.map（（curse，i）=>(
));

请注意，索引（

i

）不是一个好键，除了松脱的绒线之外，任何东西都会抱怨这一点。如果数组中的项被添加或删除，索引会发生变化，因此同一个键可能会引用不同的项-不好

---

最后，将

cursos

从

列表curses

中取出。它是一个常量，不会更改，但您可以在每次渲染时重新分配它。

谢谢您的帮助，但现在它返回另一个错误“TypeError:无法读取未定义的属性“image”您知道如何修复它吗？

文本

未定义。只需

console.log

在不同的地方查看您在哪里以及哪里出了问题。

() => { return whatever }

() => whatever

const returnCurses = cursos.map((curse, i) => (
  <div key={i}>
    <Card text={curse} />
  </div>
));