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

如何解决React 中的迭代器 react/jsx-key 中缺少元素的“key”属性

我是 React 的新手，当我按下 <button onClick={addComment} className='add-btn'>+</button> 时，我试图清除输入

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,date: date }]);
    e.preventDefault();
    setComment('');  
};

如何防止出现此错误？

看起来你的帖子主要是代码；请添加更多详细信息。非常感谢 Stackoverflow 我试过了，但我不能

解决方法

当您使用 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 在您的数据中必须是唯一的，如果由于某种原因无法实现，您可以使用 index 方法中的 Array.map，但不推荐使用

,

为了使反应更快，您不应该避免此警告并将关键道具放在标签上（在本例中为 li）。 Key prop 应该是对象的索引或 id，键不能重复。

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

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