从数组中删除选定的元素

Question

我有输入字段，它接受用户的输入 (interest)，然后按 Enter 键 将 interest 添加到 interests 数组中。然后，当用户继续添加时，此数组中的元素通过Domain 组件显示在屏幕上。 Domain 组件包含一个图标 X（十字），单击该图标应从数组中删除选定/单击的元素。现在，数组中的最后一个元素在单击后被删除。

我该如何解决这个问题？代码如下：

function Demo() {
  const [interest, setinterest] = useState("");
  const [interests, setinterests] = useState([]);

  const domainSelection = (e) => {
    if (e.key === "Enter" && interest.length > 0) {
      setinterests((interests) => [...interests, interest]);
      setinterest("");
    }
  };

  const RemoveDomain = (e) => {
    var arr = [...interests];
    var index = arr.indexOf(e.target.value);
    arr.splice(index, 1);
    setinterests(arr);
  };

  const Domain = ({ interest }) => {
    return (
      <span>
        {interest}
        <span>
          <X onClick={RemoveDomain} />
        </span>
      </span>
    );
  };

  return (
    <div>           
          <Input
            name="intersts"
            type="text"
            placeholder="eg Machine Learning .. "
            value={interest}
            required={true}
            onChange={(e) => setinterest(e.target.value)}
            className="interest-input inputs"
            onKeyDown={domainSelection}
          />
          {interests.map((interest, i) => (
            <Domain
              interest={interest}
              // Prevent duplicate keys by appending index:
              key={interest + i}
            />
          ))}
    </div>
  );
}

export default Demo;

Answer 1

我认为e.target.value 是未定义的。 使用过滤器，这可能会有所帮助

const RemoveDomain = (value) => {
  var arr = interests.filter((item) => item !== value);
  setinterests(arr);
};

const Domain = ({ interest }) => {
  return (
    <span>
      {interest}
      <span>
        <X onClick={() => RemoveDomain(interest)} />
      </span>
    </span>
  );
};