Ошибка типа: не удается прочитать свойство 'map' неопределенного в reactjs

#reactjs #react-hooks #jsx

#reactjs #реагирующие крючки #jsx

Вопрос:

привет, ребята, я получаю сообщение об ошибке типа не могу прочитать свойство, не знаю, где я ошибаюсь, пожалуйста, попробуйте решить мою ошибку или скажите мне, что мне делать?

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
Я пытаюсь получить эту звезду people в моем компоненте people, чтобы показать данные о людях, кто-нибудь может помочь, как я могу это сделать

 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)} />amp;nbsp;amp;nbsp;
                    <span><button className='btn btn-secondary' onClick={onSubmit}>Search</button></span>
                </div>
            </div>
        </div>
    )
}

export default Star;

1. Вы уверены, что правильно переходите props к этому компоненту? Проблема в том, что ваша people константа равна undefined , а это значит, что у вас, вероятно, нет этого свойства внутри props object .

2. добавьте журнал консоли после const и посмотрите, правильно ли он отображает данные. const {people} = props; console.log(люди);

3. да, я правильно передаю реквизиты

4. спасибо, сэр, за помощь, я постараюсь исправить свою ошибку

5. не могли бы вы поделиться выводом консоли?

Ответ №1:

Для вашего случая подойдет простая проверка:

 (people amp;amp; people.length > 0) amp;amp; people.map(...)

Причина в том, что people is undefined при первом рендеринге из-за эффекта 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;