问题描述
我是 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>
)}