Блог

Я начал изучать typescript и react и столкнулся с проблемой с отображением массива. Добавление в массив происходит нормально, но элементы не отображаются. Я пробовал разные способы, такие как рендеринг массива с помощью .foreach но это также не работает. Что я делаю не так? Итак, вот часть моего приложения main element

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

  

При использовании вы .push изменяете массив на месте, и React не может сказать, что массив изменился.

Вам просто нужно сделать:

 setToDos([...currentToDoList]);
  

и это должно сработать.

Например, в приведенном ниже фрагменте, когда вы сравниваете x с y, вы получаете true . Но если вы сравните x с [...y] , вы получите false.

 const x = [1,2]

let y = x;

y.push(3)

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