Question

所以我正在基于Reactjs的一个非常简单的登录页面上工作。所以有一部分我有我们的扬声器组件。当我尝试通过扬声器映射时，表明数据未定义

import Speakers from "./components/Speakers";

class App extends Component {
  state = {
    speakers: {
      socials: ["facebook", "twitter", "dribbble"],
      data: [
        {
          img:
            "https://bootstrapmade.com/demo/themes/Groovin/assets/img/dummies/team1.jpg",
          name: "Jeiii",
          details:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporismolestiae debitis, distinctio, ratione dignissimos ea quia liberofacilis, accusantium voluptates eveniet mollitia vitae nostrum animi.Cupiditate nam alias praesentium perspiciatis sint rerum, culpa vero veritatis! Magnam doloremque iste esse? Voluptas.",
          social: "dribble"
        },
        {
          img:
            "https://bootstrapmade.com/demo/themes/Groovin/assets/img/dummies/team1.jpg",
          name: "Jeiii",
          details:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporismolestiae debitis, distinctio, ratione dignissimos ea quia liberofacilis, accusantium voluptates eveniet mollitia vitae nostrum animi.Cupiditate nam alias praesentium perspiciatis sint rerum, culpa vero veritatis! Magnam doloremque iste esse? Voluptas.",
          social: "dribble"
        },
        {
          img:
            "https://bootstrapmade.com/demo/themes/Groovin/assets/img/dummies/team1.jpg",
          name: "Jeiii",
          details:
            "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporismolestiae debitis, distinctio, ratione dignissimos ea quia liberofacilis, accusantium voluptates eveniet mollitia vitae nostrum animi.Cupiditate nam alias praesentium perspiciatis sint rerum, culpa vero veritatis! Magnam doloremque iste esse? Voluptas.",
          social: "dribble"
        }
      ]
    },

  };
  render() {
    const { hero, event, schedule, speakers } = this.state;
    return (
      <Fragment>
        <Container>
            <Speakers
              img={speakers.img}
              name={speakers.name}
              details={speakers.details}
              socials={speakers.socials}
            />
          </div>
        </Container>
      </Fragment>
    );
  }
}

这是扬声器组件，其中错误显示数据未定义

class Speakers extends Component {
  render() {
    const { data, socials } = this.props;
    const speakerList = data.map(speaker => {
      return (
        <Col md={3}>
          <Card>
            <CardImg src={speaker.img} className="img-fluid" top width="100%" />
            <CardBody>
              <CardTitle className="name text-center">{speaker.name}</CardTitle>
              <CardText className="details">{speaker.details}</CardText>
              <div>
                {socials.map(social =>
                  speaker.socials[social] ? (
                    <a href={`https:www.${speaker.socials}.com`}>
                      <i className={`fab fa-${social}`} />
                    </a>
                  ) : null
                )}
              </div>
            </CardBody>
          </Card>
        </Col>
      );
    });

    return (
      <div className="speakers">
        <Row>{speakerList}</Row>
      </div>
    );
  }
}

enter image description here

Answer 1

让我们看看这是怎么回事。

1。您没有将数据道具发送到扬声器组件。

<Speakers
   img={speakers.img}
   name={speakers.name}
   details={speakers.details}
   socials={speakers.socials}
 />

这样做。

<Speakers
   img={speakers.img}
   name={speakers.name}
   details={speakers.details}
   socials={speakers.socials}
   data={speakers.data}
 />

2.speakers状态不具有name，img，details一样的属性。它们是speaker状态内数据对象的一部分。因此，speakers.name，speakers.details无效。

您需要了解的内容。

a。销毁只是在顶层进行，不会为您提供内部数据对象的详细信息。

b。始终使用道具类型来更好地检查道具类型。

Answer 2

您正在从App组件发送错误的数据，应该是

 render() {
    const { socials, data } = this.state;
    return (
      <Fragment>
         <Speakers socials={socials} data={data}/>
      </Fragment>
    );
  }

或

 render() {
    return (
      <Fragment>
         <Speakers ...this.state/>
      </Fragment>
    );
  }

反应数据/道具未定义

2 个答案: