Не удается прочитать свойство 'map' неопределенного react 17

#reactjs #error-handling #new-operator

#reactjs #обработка ошибок #new-operator

Вопрос:

В настоящее время я начал изучать react в курсе Udemy «react-for-the-rest-of-us». теперь я пытаюсь приблизиться к перехвату состояния из дочернего компонента, и я получаю указанную выше ошибку. моя цель — добавить еще один элемент в состояние, получив его значения из пользовательского ввода это родительский компонент:

     import React, { useState } from "react";
    import AddPetForm from "./FormPet";
    function Header(props) {
      const [pets, setPets] = useState([
        { name: "Meowsalot", species: "cat", age: "5", id: 123456789 },
        { name: "Barksalot", species: "dog", age: "3", id: 987654321 },
        { name: "Fluffy", species: "rabbit", age: "2", id: 123123123 },
        { name: "Purrsloud", species: "cat", age: "1", id: 456456456 },
        { name: "Paws", species: "dog", age: "6", id: 789789789 },
      ]);
    
      const pet = pets.map((pet) => (
        <Pet name={pet.name} species={pet.species} age={pet.age} id={pet.id} />
      ));
      return (
        <div>
          <LikedArea />
          <TimeArea />
          <ul>{pet}</ul>
          <AddPetForm set={setPets} />
        </div>
      );
    }
    function Pet(props) {
      return (
        <li>
          {props.name}is a {props.species} and is {props.age} years old
        </li>
      );
    }

и это дочерний компонент:

     import React, { useState } from "react";
    
    function AddPetForm(props) {
      const [name, setName] = useState();
      const [species, setSpecies] = useState();
      const [age, setAge] = useState();
      console.log(props.set);
      function handleSubmit(e) {
        e.preventDefault();
        props.set((prev) => {
          prev.concat({ name: name, species: species, age: age, id: Date.now() });
          setName("");
          setSpecies("");
          setAge("");
        });
      }
    
      return (
        <form onSubmit={handleSubmit}>
          <fieldset>
            <legend>Add New Pet</legend>
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Name"
            />
            <input
              value={species}
              onChange={(e) => setSpecies(e.target.value)}
              placeholder="species"
            />
            <input
              value={age}
              onChange={(e) => setAge(e.target.value)}
              placeholder="age in years"
            />
            <button className="add-pet">Add Pet</button>
          </fieldset>
        </form>
      );
    }
    
    export default AddPetForm;

1. Я не вижу никаких проблем в этом коде, вы не сообщаете нам из каждого файла или строки, из которых возникает ошибка, лучше добавить изолированную среду и воссоздать проблему codesandbox.io/s/react-template-t80qj

2. это полная ошибка в том виде, в каком она представлена: Header.js:15 Uncaught TypeError: не удается прочитать свойство ‘map’ неопределенного

3. index.js:1 Вышеуказанная ошибка произошла в компоненте <Header>:

Ответ №1:

Вы не возвращаете новый объединенный массив. Поэтому, когда вы вызываете props.set , это должно быть так:

 props.set((prev) => {
      setName("");
      setSpecies("");
      setAge("");
      return prev.concat({ name: name, species: species, age: age, id: Date.now() });
});

Если вы ничего не возвращаете, то технически возвращаемое значение равно undefined , так что это то, на что оно устанавливает состояние. Затем вы получаете сообщение об ошибке при попытке .map его