如何解决从数组中删除标签元素还会删除其后面的标签
当我删除后面有另一个标签的标签时遇到问题。例如,如果我有两个ant标记,而我删除了第一个,则第二个消失,但是当我console.log它时,第二个在技术上仍然存在。但是,如果我有两个蚂蚁标签,并且先删除了第二个标签,它将删除第二个标签,而第一个标签也不会消失。
这是删除标签相关的所有代码,我使用mobx进行存储,emailTemplate.toEmail是一个字符串格式的数组,包含以','分隔的电子邮件,在allToEmails变量中将其拆分为实际数组,我将该变量置于一种状态,以便可以对其进行操作。
const allToEmails = emailTemplate && emailTemplate.toEmail ?
emailTemplate.toEmail.replace(/ /g,'').split(",") : [];
const [ toEmails,setToEmails ] = useState(allToEmails);
useEffect(() =>{
emailTemplate.setAttr("toEmail",toEmails.toString());
emailTemplate.save();
},[toEmails]);
const handleRemoveTag = (value) => {
setToEmails(toEmails.filter(email => email !== value));
};
<React.Fragment>
{
toEmails.map( (email,index) => {
return (
<EmailTag
key={index}
email={email}
index={index}
handleEmailChange={handleEmailChange}
handleRemoveTag={handleRemoveTag}
/>
)
})
}
<React.Fragment />
这是EmailTag类:
function EmailTag({intl: { formatMessage },email,index,handleEmailChange,handleRemoveTag,...props}) {
const [ isEditing,setIsEditing ] = useState(false);
const [ emailValue,setEmailValue ] = useState(email);
const handleEmailValueChange = (e) => setEmailValue(e.target.value);
if (!isEditing) {
return (
<EmailTagLabel
key={index}
closable={true}
onClose={() => handleRemoveTag(email)}
>
<span
ondoubleclick={() => {
setIsEditing(true);
}}
>
{emailValue}
</span>
</EmailTagLabel>
)
} else {
return (
<EditEmailInput
autoFocus
value={emailValue}
size="small"
onChange={handleEmailValueChange}
onBlur={() => { handleEmailChange(emailValue,index) ? setIsEditing(false) : setIsEditing(true) }}
onPressEnter={() => { handleEmailChange(emailValue,index) ? setIsEditing(false) : setIsEditing(true) }}
/>
)
}
}
export default injectIntl(observer(EmailTag))
解决方法
我通过用非索引替换键prop的值来修复它,索引将其弄乱了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。