无法读取未定义反应的属性“ map” 17

问题描述

目前，我开始在Udemy课程“对剩下的时间保持反应”中学习做出反应。 现在，我正在尝试从子组件中获取状态挂钩，并且出现上述错误。 我的目标是通过从用户输入中获取值来向状态添加另一个元素 这是父组件：

    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",age: "1",id: 456456456 },{ name: "Paws",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;

解决方法

您不是返回新的串联数组。因此，当您致电props.set时，应该是这样的：

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

如果您不返回任何内容，那么从技术上讲，返回值是undefined，因此它将状态设置为该值。然后，当您尝试.map时，您会得到错误