呈现数组时的React-typescript问题

Question

我开始学习typescript和react，遇到了一个渲染数组的问题。添加到数组中可以正常进行，但不会显示元素。我尝试了不同的方法，比如用.foreach渲染数组，但也不起作用。我做错了什么？下面是我的main element App的一部分

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;

下面是我的列表显示的代码

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>
  );
};

Answer 1

当您使用.push时，您正在就地修改数组，而React不能告诉您数组已经更改。

你只需要做：

setToDos([...currentToDoList]);

它应该是有效的。

例如，在下面的代码片段中，当您将x与y进行比较时，结果为true。但是如果你把x和[...y]比较，你得到的结果是假的。

const x = [1,2]

let y = x;

y.push(3)

console.log(x === y);
console.log(x === [...y]);

​