类型错误：无法读取属性'；地图'；reactjs中未定义的

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

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;

从“React”导入React
康斯特人=（道具）=>{
const{people}=道具；
返回(
{
people.map（（peple）=>{
{peple}
})
}
)
}
导出默认用户；

Star.js 我正在尝试在我的人员组件中获取这个明星人员，以显示人员数据，有人可以帮助我吗

import React，{useState，useffect}来自“React”；
导入“/Star.css”；
常数星=（）=>{
const[search，setSearch]=useState（“”）；
const[people，setPeople]=useState（[]）；
const[planet，setPlanet]=useState（[]）；
const onSubmit=（e）=>{
e、 预防默认值（）；
}
useffect（（）=>{
异步函数fetchPeople（）{
让结果=等待获取（“https://swapi.dev/api/people/?format=json");
让data=wait result.json（）；
setPeople（数据、结果）；
}
异步函数fetchPlanet（）{
让结果=等待获取（“https://swapi.dev/api/planets/?format=json");
让data=wait result.json（）；
setPlanet（数据结果）；
}
fetchPeople（）；
fetchPlanet（）；
}, [])
//console.log（“人”，人）；
//控制台日志（“行星”，行星）；
返回(
星球大战
setSearch（e.target.value）}/>
搜寻
)
}
导出默认星号；

注意，我已经移除了一对花括号

或者，您可以像下面这样使用显式返回：

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;

从“React”导入React；
康斯特人=（道具）=>{
const{people}=道具；
返回(
{people.map（（peple）=>{
返回(
{peple}
);
})}
);
};
导出默认用户；

对于您的情况，只需简单检查即可：

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

---

原因是由于useEffect不会立即执行，因此第一次渲染时未定义

人员

。

是否确实将

道具

正确传递到此组件？问题是您的

人员

常量是

未定义的

，这意味着您的

道具

对象中可能没有该属性。请在const之后添加控制台日志，查看它是否正确显示数据。const{people}=道具；console.log（人）；是的，我正在正确地传递道具Hanku先生寻求帮助，我将尝试修复我的错误。您能分享控制台输出吗？

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;

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