React JS - TypeError：无法读取未定义“CardList”的属性“地图”

Question

为什么我的 card-list.component.jsx 文件中的代码会出现此错误消息，我该如何解决此问题？

TypeError：无法读取未定义“CardList”的属性“地图”

谢谢你，克雷格

文件名：card-list.component.jsx

import React from "react";

import { Card } from "../card/card.component";

import "./card-list.styles.css";

export const CardList = (props) => (
  <div className="card-list">
    {props.monsters.map((monster) => (
      <Card key={monster.id} monster={monster} />
    ))}
  </div>
);

文件名：card.component.jsx

  
import React from 'react';

import './card.styles.css';

export const Card = props => (
  <div className='card-container'>
    <img
      alt='monster'
      src={`https://robohash.org/${props.monster.id}?set=set2&size=180x180`}
    />
    <h2> {props.monster.name} </h2>
    <p> {props.monster.email} </p>
  </div>
);

文件名：App.js

import React from "react";

import { CardList } from "./components/card-list/card-list.component";
//import { SearchBox } from './components/search-box/search-box.component';

import "./App.css";

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      monsters: [],
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((users) => this.setState({ monsters: users }));
  }

  render() {
    return (
      <div className="App">
        <CardList name="Yihua">
          {this.state.monsters.map((monster) => (
            <h1 key={monster.id}> {monster.name} </h1>
          ))}
        </CardList>
      </div>
    );
  }
}

export default App;

Answer 1

在 App 中调用 CardList 时，您不会将“怪物”作为道具传递下去。

 <div className="App"> <CardList name="Yihua"> ------> Here you are missing monsters={this.state.monsters} {this.state.monsters.map((monster) => ( <h1 key={monster.id}> {monster.name} </h1> ))} ---> also this will go as props.children and not using it in CardList </CardList> </div>