React.js，列表中的每个孩子都应该有一个唯一的“关键”道具。 如果已经给出密钥，如何解决

Question

Im getting the warning Warning: Each child in a list should have a unique "key" prop. . My understanding of react was that when you pass to a new component you give it the Id of a prop, which i am doing, yet im still getting this warning. In my code i have some dummy data that is used to set the state of table data ie

const DumData = 
    {   id: 1,
        UserGroup:[
    {
        id: "1",
        Name: "Dax Johnson",
        AddressLine: "82 Mahu road",
        Email: 'DaxIng@Gmail.co.nz',
        ContactNumber: "02791743",
        Zip: '8801',
        Notes: 'His dog is swag',
        Animals: [
                {   id: "1",
                    PatientID: "23",
                    AnimalName: 'SwagDog',
                    Species: "Canine",
                    Breed: "Dog",
                    Gender: "Male",
                    DOB: "",
                    Vists: [{
                        id:1 ,
                        time: 'October 31st 2021'
                    },
                    {
                        id:2 ,
                        time: 'October 21st 2021'
                    }]
                },
                { id: '2',
                AnimalName: 'CoolCat',
                Species: "Feline",
                Breed: "Cat",
                Gender: "Female",
                DOB: "",
                Vists: [{
                    id:1 ,
                    time: 'March 4th 2021'
                }]
                }
                ],
    },
    {
        id: "12",
        Name: "Willam McDonald",
        AddressLine: "2 Wacky Ave",
        Email: 'WILLIAM@hotmail.co.nz',
        Zip: '8661',
        ContactNumber: "033777300",
        Notes: 'His cat is cool',
        Animals: [
              { 
              id: "1",
              PatientID: "23",
              AnimalName: "Molder",
              Species: "Feline",
              Breed: "Cat",
              Gender: "Female",
              DOB: "2008",
              Vists: [{
                id:1 ,
                time: 'February 4th 2022'
            }]
            }
            ],


      },    
      {
        id: "3",
        Name: "Oscar Issac",
        AddressLine: "2 Wacky Ave",
        Email: 'Oscar@hotmail.co.nz',
        Zip: '7041',
        ContactNumber: "0279000",
        Notes: 'His cat is cool',
        Animals: [
              { 
              id: "1",
              PatientID: "23",
              AnimalName: "Cool cat",
              Species: "Feline",
              Breed: "Cat",
              Gender: "Female",
              DOB: "2008",
              Vists: [{
                id:1 ,
                time: 'June 24th 2021'
            }]
              }
              ],
      }    ]
    
    };

and then later const [tableData, settableData] = useState(DumData);

I create a component table called Hometable where i pass it the tableData and the key id

<div className='Hometable-div'>
                <Hometable
                    data={tableData}
                    key={tableData.id}
                ></Hometable>
            </div>

and then i map the data so it is displayed in the table in the Hometable component. like so

function Hometable(props) {
    var OwnerName;
    var Animalname;
    var breed;

    return (
      <div className='table-container'>
          <table>
              <thead>
                  <tr>
                      <th>Owner</th>
                      <th>Animal Name</th>
                      <th>Type/Breed</th>
                      <th>Vist Time</th>
                  </tr>
              </thead>
              <tbody>
              {props.data.UserGroup.map((person) => (
                    OwnerName = person.Name,
                    person.Animals.map((Animal) => ( 
                        Animalname = Animal.AnimalName,
                        breed = Animal.Breed,
                        Animal.Vists.map((vist) => (
                            <tr>
                                <td>  <i class="bi bi-person-fill"></i> {OwnerName} </td>
                                <td> {Animalname}</td>
                                <td> {breed} </td>
                                <td> {vist.time} </td>
                            </tr>
                        )) 
                    )) 
                ))}

                <tr>
                  <td className='footer'> 
                      
                      </td>
                      <td className='footer'> 
                          
                      </td>
                      <td className='footer'>
                          
                          </td>
                      <td className='footer'>
                          <button className='TableButton'> Page 1</button>
                      </td>
                  </tr>
              </tbody>
          </table>

      </div>
    );
  }
  
  export default Hometable;

I understand i dont use the key value in Hometable so this might be an easy fix if anyone can help me resolve this warning?

Answer 1

Try passing the key here in the code

{props.data.UserGroup.map((person) => (
                    OwnerName = person.Name,
                    person.Animals.map((Animal) => ( 
                        Animalname = Animal.AnimalName,
                        breed = Animal.Breed,
                        Animal.Vists.map((vist, index) => (
                         // or visit.id if available
                            <tr key={index}>
                                <td>  <i class="bi bi-person-fill"></i> {OwnerName} </td>
                                <td> {Animalname}</td>
                                <td> {breed} </td>
                                <td> {vist.time} </td>
                            </tr>
                        )) 
                    )) 
                ))}

It's recommended to use keys coming from the data source such as visit.id. Last resort should be using index. For more information you can read here .

Answer 2

Try using this code :

function Hometable(props) {
    var OwnerName;
    var Animalname;
    var breed;

    return (
      <div className='table-container'>
          <table>
              <thead>
                  <tr>
                      <th>Owner</th>
                      <th>Animal Name</th>
                      <th>Type/Breed</th>
                      <th>Vist Time</th>
                  </tr>
              </thead>
              <tbody>
              {props.data.UserGroup.map((person) => (
                    OwnerName = person.Name,
                    person.Animals.map((Animal) => ( 
                        Animalname = Animal.AnimalName,
                        breed = Animal.Breed,
                        Animal.Vists.map((vist,index) => (
                            <tr  key={index}  >
                                <td>  <i class="bi bi-person-fill"></i> {OwnerName} </td>
                                <td> {Animalname}</td>
                                <td> {breed} </td>
                                <td> {vist.time} </td>
                            </tr>
                        )) 
                    )) 
                ))}

                <tr>
                  <td className='footer'> 
                      
                      </td>
                      <td className='footer'> 
                          
                      </td>
                      <td className='footer'>
                          
                          </td>
                      <td className='footer'>
                          <button className='TableButton'> Page 1</button>
                      </td>
                  </tr>
              </tbody>
          </table>

      </div>
    );
  }
  
  export default Hometable;

Answer 3

In my opinion:

const array = [...];
...
const new_array_for_props = array.map(function(arr, index){
   <target_comp props_01={arr.props_01} key={index} />
});

sub component(target_comp) unnecessary uses props.key.