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

Question

我是 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, { comment: commentInput.current.value, date: date }]);
    e.preventDefault();
    setComment('');  
};

如何防止出现此错误？

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

Answer 1

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

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

请记住，您的关键道具在您的数据中必须是唯一的，如果由于某种原因您无法实现，您可以使用Array.map方法中的index ，但不建议这样做

Answer 2

为了使反应更快，您不应该避免此警告并将关键道具放在标签上（在本例中为 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>
)}