React 中未定义的属性“映射”

Question

我正在在线学习反应课程。当我尝试使用 map 显示数组中的项目列表以显示在子组件中时，我不断收到“无法读取未定义的属性映射”。

从中获取数据时抛出错误 users

import React, { Component } from "react";
import ReactDOM from "react-dom";


let userList = [
  { name: "John", age: 24, place: "India" },
  { name: "Henry", age: 24, place: "India" },
  { name: "Ulrich", age: 24, place: "India" }
];

const AppChild = ({ name, age, place, Graduated }) => {
  return (
    <section>
      <p>name: {name}</p>
      <p>age: {age}</p>
      <p>place: {place}</p>
      {/* access the value via props */}
      <p>Graduated: {Graduated ? "yes!" : "no!"}</p>
    </section>
  );
};


export default class App extends Component {
    
  state = {
    userExists: true,
    isGraduated: true,
    loading: true,
  }; 


  toggleStatus = () => {
    this.setState(prevState => ({
      userExists: !prevState.userExists // value : false
    }));
  };

  render() {
    const { users } = this.props; 
    return (
      <div>
        <h2>Profile</h2>
        <h4>
          Profile Status is {this.state.userExists ? "Updated" : "Outdated"}
          <br />
          <button onClick={this.toggleStatus}>Check Status</button>
        </h4>
        {users.map(user => (
          
          <AppChild
            name={user.name}
            age={user.age}
            place={user.place}
            Graduated={this.state.isGraduated} // passing state to child component
          />
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App users={userList} />, document.getElementById("root"));

Answer 1

下面是正确的代码。在前面的代码中，我尝试<App/>在index.js 和App.js 中进行渲染。感谢大家帮助我

=>index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

let userList = [
    { name: "John", age: 24, place: "India" },
    { name: "Henry", age: 24, place: "India" },
    { name: "Ulrich", age: 24, place: "India" }
  ];

  
ReactDOM.render(<App users={userList} />, document.getElementById("root"));

=> 应用程序.js

import React, { Component } from "react";

// child component
const AppChild = ({ name, age, place, Graduated }) => {
  return (
    <section>
      <p>name: {name}</p>
      <p>age: {age}</p>
      <p>place: {place}</p>
      {/* access the value via props */}
      <p>Graduated: {Graduated ? "yes!" : "no!"}</p>
    </section>
  );
};

// parent component
export default class App extends Component {
    
  state = {
    userExists: true,
    isGraduated: true,
    loading: true,
  }; 

  toggleStatus = () => {
    this.setState(prevState => ({
      userExists: !prevState.userExists // value : false
    }));
  };

  render() {
    const { users } = this.props;
    return (
      <div>
        <h2>Profile</h2>
        <h4>
          Profile Status is {this.state.userExists ? "Updated" : "Outdated"}
          <br />
          <button onClick={this.toggleStatus}>Check Status</button>
        </h4>
         {users.map((user) => {
          return(
            <AppChild
              name={user.name}
              age={user.age}
              place={user.place}
              Graduated={this.state.isGraduated} // passing state to child component
            />
          )})}
      </div>
    );
  }
}