从数组中移除标记元素也会移除它后面的标记react-antd

Question

当我删除一个后面有另一个标签的标签时，我遇到了一个问题。例如，如果我有两个蚂蚁标签，并且我删除了第一个，第二个标签就会消失，但当我控制台日志时，从技术上讲第二个仍然存在。但如果我有两个蚂蚁标签，我先删除第二个标签，它会删除第二次标签，而第一个标签也不会消失。

以下是删除标签所关联的所有代码，我使用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))

Answer 1

我通过用非索引的东西替换键prop的值来修复它，索引会把它搞砸。