Reactjs 使用渲染数组处理类型脚本问题

我开始学习typescript和react，但在渲染数组时遇到了一个问题。添加到数组的操作正常，但不显示元素。我尝试了不同的方法，比如使用.foreach渲染数组，但它也不起作用。我做错了什么？这是我的主要元素应用程序的一部分

export interface IToDoElement {
  completed: boolean;
  id: string;
  toDoText: string;
  date: Date;
  deadlineDate?: Date; 
  keywords?: string; 
}

const App: React.FC = () => {
  const [ToDos, setToDos] = useState<Array<IToDoElement>>([]);

  function setNewToDo(text: string): void {
    let currentToDoList: Array<IToDoElement> = ToDos;

    currentToDoList.push({
      completed: false,
      id: uuid(),
      toDoText: text,
      date: new Date(),
    });
    setToDos(currentToDoList);
  }

  return (
    <div>
      <h1 className="h1 textAlignCenter">ToDo List</h1>
      <div className="divBorder">
        <h5 className="h5 ml-2 mt-2">Enter the action to add to the list:</h5>
        <ToDoForm onSubmit={setNewToDo} />
        <ToDoList currentToDoList={ToDos} />
      </div>
    </div>
  );
};

export default App;

导出接口ITODElement{
完成：布尔；
id：字符串；
toDoText:字符串；
日期：日期；
deadlineDate？：日期；
关键词：字符串；
}
常量应用程序：React.FC=（）=>{
const[ToDos，setToDos]=useState（[]）；
函数setNewToDo（文本：字符串）：void{
让currentToDoList:Array=ToDos；
currentToDoList.push({
已完成：错误，
id:uuid（），
toDoText:text，
日期：新日期（），
});
setToDos（currentToDoList）；
}
返回(
待办事项清单
输入要添加到列表中的操作：
);
};
导出默认应用程序；

所以我的列表显示有代码

import React from "react";
import { IToDoElement } from "../App";

import "../App.css";

interface IProps {
  currentToDoList: Array<IToDoElement>;
}

export const ToDoList: React.FC<IProps> = (props) => {
  return (
    <div>
      {props.currentToDoList.map((value) => {
        return (
          <div key={value.id} className="parentFlex">
            <button className="btn-dark">{value.toDoText}</button>
          </div>
        );
      })}
    </div>
  );
};

从“React”导入React；
从“./App”导入{IToDoElement}；
导入“./App.css”；
接口IProps{
currentToDoList:数组；
}
导出常量到策略：React.FC=（道具）=>{
返回(
{props.currentToDoList.map（（值）=>{
返回(
{value.toDoText}
);
})}
);
};

当您使用

.push

时，您正在修改阵列，而React无法判断阵列是否已更改

您只需执行以下操作：

setToDos([...currentToDoList]);

它应该会起作用

例如，在下面的代码片段中，当您将x与y进行比较时，您将得到true。但是如果你将x与

[…y]

进行比较，你会得到错误的结果。

const x=[1,2]
设y=x；
y、 推（3）
console.log（x==y）；
log（x==[…y]）