反应数据/道具未定义

Question

So i am working on a pretty simple landing page Based on reactjs. So there is a section where i have our speakers component. When i try to map through the speakers it shows that data is undefined

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>
    );
  }
}

And here is the speaker component where the error is showing data is undefined

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

Let's see what is wrong with this.

1.You are not sending data prop to Speakers Component.

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

Do like this.

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

2.speakers state does not have properties like name,img,details as whole.They are part of data object inside speakers state.So speakers.name ,speakers.details won't work.

What you need to know.

a.Destructuring just happens at top level.It won't give you details inside the data object inside.

b.Always use prop-types for better prop types checking.

Answer 2

You are sending wrong data from your App component, it should be

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

or

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