为什么 setState 更新后数组没有被删除而是添加了另一个数组？

Question

我想在 myData 更新时重新渲染数组，但旧数组仍保留在原处，并且正在创建新数组。每当状态更新时，包含 myData 的组件都应该重新渲染，但事实并非如此。

  useEffect(() => {
    if(itemIdToMoveOnTop){
      setIsLoading(true)
      setMyData(null);

      let sortedData = [...myData]; // create a copy of myData

      // Sort the array
      sortedData.sort((a, b) => {
        if (a.id === itemIdToMoveOnTop) {
          return -1;
        } else if (b.id === itemIdToMoveOnTop) {
          return 1;
        } else {
          return 0;
        }
      });

      // Filter the array
      sortedData = sortedData.filter((item) => item.info);

      setMyData(sortedData); // update myData with the sorted and filtered data
      setIsLoading(false)
    }
  }, [itemIdToMoveOnTop]);

对应div：

 {isLoading ? (
  <div>Loading...</div> // replace with your loading component or spinner
) : (myData
    // {myData
      .filter((item) => item.info)
      .map((item) => (
        <div className="bg-teal-500">
          <div className="flex flex-row">
            <Speech
              ref={speechRef}
              key={item.id}

Answer 1

假设Javascript。 array.sort() 对数组中的项目进行排序（同一数组）。 array.filter() 返回一个新数组，仅包含满足条件的项目。