从数组中删除标签元素也会删除它后面的标签反应 antd

Question

我在删除后面有另一个标签的标签时遇到问题。例如，如果我有两个蚂蚁标签，我删除了第一个，第二个就消失了，但是当我 console.log 它时，第二个在技术上仍然存在。但是如果我有两个 ant 标签，我先删除第二个标签，它会删除第二个标签，而第一个标签也不会消失。

这是所有与删除标签相关的代码，我使用 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 class:

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

我通过用不是索引的东西替换键属性的值来修复它，索引搞砸了。

从数组中删除标签元素也会删除它后面的标签反应 antd

Removing tag element from array also removes the tag behind it react antd

reactjs

mobx

antd