类型错误：无法读取 reactjs 中未定义的属性“地图”答案

【问题标题】：Type Error: Cannot read property 'map' of undefined in reactjs类型错误：无法读取 reactjs 中未定义的属性“地图”
【发布时间】：2021-03-19 13:18:12
【问题描述】：

大家好，我遇到了一个错误，比如无法读取属性，不知道我错在哪里，请尝试解决我的错误或告诉我该怎么办？

People.js

这是我要显示人员信息的 people.js 文件

import React from 'react'

const People = (props) => {

    const {people} = props;

    return (
        <div className='row'>
            {
                people.map((peple)=>{
                    <div className='col-md-3'>
                        <div className='card'>
                            <div className='card-body'>
                               <h4>{peple}</h4>
                            </div>
                        </div>
                    </div>
                })
            }
        </div>
    )
}

export default People;

Star.js 我正在尝试在我的人员组件中获取这个明星人员以显示人员数据，任何人都可以帮助我怎么做

import React, { useState, useEffect } from 'react';
import './Star.css';

const Star = () => {

    const [search, setSearch] = useState('');
    const [people, setPeople] = useState([]);
    const [planet, setPlanet] = useState([]);

    const onSubmit = (e) => {
        e.preventDefault();
    }

    useEffect(() => {
        async function fetchPeople() {
            let result = await fetch("https://swapi.dev/api/people/?format=json");
            let data = await result.json();
            setPeople(data.results);
        }

        async function fetchPlanet() {
            let result = await fetch("https://swapi.dev/api/planets/?format=json");
            let data = await result.json();
            setPlanet(data.results);
        }

        fetchPeople();
        fetchPlanet();
    }, [])

    // console.log("people", people);
    // console.log("planet", planet);

    return (
        <div>
            <div className='container'>
                <h2>Star War</h2>
                <div className='jumbotron'>
                    <input type="text"
                        className="form-control"
                        placeholder='Search...'
                        value={search}
                        onChange={(e) => setSearch(e.target.value)} />&nbsp;&nbsp;
                    <span><button className='btn btn-secondary' onClick={onSubmit}>Search</button></span>
                </div>
            </div>
        </div>
    )
}

export default Star;

【问题讨论】：

您确定将props 正确传递给该组件吗？问题是您的people 常量是undefined，这意味着您可能在props 对象中没有该属性。
在 const 之后添加一个console log，看看它是否正确显示数据。常量 {人} = 道具； console.log(people);
是的，我正确地传递了道具
谢谢先生的帮助，我会尽力解决我的错误
你能分享一下控制台输出吗？

标签： reactjs react-hooks jsx

【解决方案1】：

对您的情况进行简单检查即可：

(people && people.length > 0) && people.map(...)

原因是 people 在第一次渲染时未定义，因为 useEffect 不会立即执行。

【讨论】：

【解决方案2】：

<People people={['Jon', 'Paul']} />

people.map() 中没有返回任何内容

改成：

import React from 'react';

const People = (props) => {
  const { people } = props;

  return (
    <div className="row">
      {people.map((peple) => (
        <div className="col-md-3">
          <div className="card">
            <div className="card-body">
              <h4>{peple}</h4>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default People;

请注意，我删除了一对花括号。

您也可以像这样使用显式返回：

import React from 'react';

const People = (props) => {
  const { people } = props;

  return (
    <div className="row">
      {people.map((peple) => {
        return (
          <div className="col-md-3">
            <div className="card">
              <div className="card-body">
                <h4>{peple}</h4>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default People;

【讨论】：