我总是得到typeerror：第9行中的item未定义，不知道为什么

Question

import React from 'react';
import { Card, CardImg, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap';

function RenderCard({item}) {
  return(
      <Card>
          <CardImg src={item.image} alt={item.name} /> //Here
          <CardBody>
          <CardTitle>{item.name}</CardTitle>
          if(item.designation) {
             <CardSubtitle>{item.designation}</CardSubtitle>
           } else {
                  return null 
               } //If statement
          <CardText>{item.description}</CardText>
          </CardBody>
      </Card>
  );
}

function Home(props) {
  return(
    <div className="container">
      <div className="row align-items-start">
          <div className="col-12 col-md m-1">
              <RenderCard item={props.dish} />
          </div>
          <div className="col-12 col-md m-1">
              <RenderCard item={props.promotion} />
          </div>
          <div className="col-12 col-md m-1">
              <RenderCard item={props.leader} />
          </div>
          </div>
      </div>
  );
}

export default Home; 

Answer 1

您的代码有两个问题。

1. 当项仍然未定义时，它使用项
2. 它在jsx部分中使用if语句（您只能使用以下简写三元运算符）

像这样更改代码

function RenderCard({item}) {
    return(
        <>
            {item ?
                <Card>
                    <CardImg src={item.image} alt={item.name} /> //Here
                        <CardBody>
                        <CardTitle>{item.name}</CardTitle>
                        {item.designation ? <CardSubtitle>{item.designation}</CardSubtitle> : undefined}
                        <CardText>{item.description}</CardText>
                    </CardBody>
                </Card> : undefined
            }
        </>
    );
}