Antd 不会重新渲染 Reactjs 中的标签

Question

我在reactjs中有一个组件，它关闭标签并从数组中删除该特定值并显示其余未关闭的标签。 这是它的代码：

 const onHandleCloseTags = (e) => {
    // event for onClose for Tags
    var array = [...tags]; // make a separate copy of the array
    var index = array.indexOf(e);
    if (index !== -1) {
      array.splice(index, 1);
      console.log("slicing: ",array);
      setTags(array);
    }
}

return(
<>
                 {tags.map((e, index) => (
                      <Tag
                        closable
                        key={index}
                        onClose={() => onHandleCloseTags(e)}
                      >
                        {e}
                        {console.count("re-rendering")}
                      </Tag>
                    ))}

</>
)

如果我在

tags

useState : ['apple','mango'] 中有这些项目并关闭

apple

标签，它也会自动关闭

mango

标签（更技术性地说，antd 正在显示

mango

标记为隐藏）。

那么我该如何克服这个问题呢？有什么想法吗？

尝试为数组创建单独的副本，但仍然不起作用

Answer 1

尝试使用

findIndex

而不是

indexOf

，所以你的函数应该如下所示：

const onHandleCloseTags = (e) => {
  var array = [...tags];
  var index = array.findIndex(
    (item) => item === e
  );
  if (index !== -1) {
    array.splice(index, 1);
    console.log("slicing: ",array);
    setTags(array);
   }
 }

Answer 2

简单使用 event.preventDefault();

const onHandleCloseTags = (event,e) => {
event.preventDefault();

// event for onClose for Tags
var array = [...tags]; // make a separate copy of the array
var index = array.indexOf(e);
if (index !== -1) {
  array.splice(index, 1);
  console.log("slicing: ",array);
  setTags(array);
}
  }

    return(
         <>
             {tags.map((e, index) => (
                  <Tag
                    closable
                    key={index}
                    onClose={(event) => onHandleCloseTags(event,e)}
                  >
                    {e}
                    {console.count("re-rendering")}
                  </Tag>
                ))}

  </>
 )