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

Question

我收到警告 Warning: Each child in a list should have a unique "key" prop.。我对反应的理解是，当你传递给一个新组件时，你给它一个道具的 ID，我正在这样做，但我仍然收到这个警告。在我的代码中，我有一些用于设置表数据状态的虚拟数据，即

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'
            }]
              }
              ],
      }    ]
    
    };

然后是const [tableData, settableData] = useState(DumData);

我创建了一个名为 Hometable 的组件表，我将 tableData 和 key id 传递给它

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

然后我映射数据，使其显示在 Hometable 组件的表中。像这样

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;

我知道我没有使用 Hometable 中的键值，所以如果有人可以帮助我解决此警告，这可能是一个简单的解决方法？

Answer 1

尝试在代码中传递密钥

{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>
                        )) 
                    )) 
                ))}

建议使用来自数据源的键，例如 visit.id。最后的手段应该是使用索引。更多信息可以阅读here。

Answer 2

尝试使用此代码：

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

在我看来：

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

子组件（target_comp）不必要地使用props.key。