从数组中删除标签元素还会删除其后面的标签

问题描述

当我删除后面有另一个标签的标签时遇到问题。例如，如果我有两个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的值来修复它，索引将其弄乱了。