React 中的迭代器 react/jsx-key 中的元素缺少“key”道具

Question

当我按下 <button onClick={addComment} className='add-btn'>+</button> Missing "key" prop for element in iterator react/jsx-key 时，我正在尝试清除输入

import React, { useContext, useState } from 'react';
import ContentHeader from './PatientHeader';
import { PatientContext } from '../App';
const moment = require('moment');

const ContentInfo = () => {
const { selectedPatient, comments, setComments } = useContext(PatientContext);
const [comment, setComment] = useState('');

const commentInput = React.createRef();

const addComment = (e: any) => {
    const date = moment();
    setComments([...comments, { comment: commentInput.current.value, date: date }]);
    e.preventDefault();
    setComment('');  
};

const handleChange = (e: any) => setComment(e.target.value);

return (
    <div className='content'>

        <ContentHeader />

        <div className='info'>
            <div className='comments'>
                <div>
                    <p>
                        <h3 className='comments-text'>Comments:</h3>
                    </p>
                    <ul>
                        {comments.map(c =>                               
                            <li>
                                <div className='new-comment'>
                                    <div>
                                        <strong>{moment(c.date).format('ll')}</strong>
                                    </div>
                                    <div>
                                        {c.comment}
                                    </div>
                                </div>
                            </li>     
                        )}
                    </ul>
                </div>

                <div className='create-commentInput'>
                    <input value={comment} ref={commentInput} onChange={handleChange} 
                     className='form-control' type="text"/>
                    <button onClick={addComment} className='add-btn'>+</button>
                </div>

            </div>  
                         
        </div>
    </div>
);
}

以下行抛出错误，我不知道为什么：

（e：任何）

const addComment = (e: any) => {
    const date = moment();
    setComments([...comments, { comment: commentInput.current.value, date: date }]);
    e.preventDefault();
    setComment('');  
};

如何防止出现此错误？

Answer 1

当您使用 map 渲染组件列表时，您必须为渲染的组件提供唯一的 key 道具 - 在您的情况下，您必须向 <li> 提供密钥道具。

{comments.map(c =>                               
  <li key={c.id}>
    <div className="new-comment">
      <div>
        <strong>{moment(c.date).format('ll')}</strong>
      </div>
      <div>
        {c.comment}
      </div>
    </div>
  </li>
)}

请记住，您的 key prop 在您的数据中必须是唯一的，如果由于某种原因对您来说不可能，您可以使用 Array.map 方法中的 index，但不建议这样做

Answer 2

为了让反应更快，你不应该避免这个警告，并将 key prop 放在标签上（在这种情况下是 li）。 Key prop 应该是索引或者对象的 id，key 不能有重复。

您可以通过两种不同的方法解决此问题：

{comments.map(c =>                               
  <li key={c.id}>
    <div className="new-comment">
      <div>
        <strong>{moment(c.date).format('ll')}</strong>
      </div>
      <div>
        {c.comment}
      </div>
    </div>
  </li>
)}

或访问索引

{comments.map((c, index) =>                               
  <li key={index}>
    <div className="new-comment">
      <div>
        <strong>{moment(c.date).format('ll')}</strong>
      </div>
      <div>
        {c.comment}
      </div>
    </div>
  </li>
)}