Uncaught TypeError: Cannot read properties of undefined (reading '01list') id

введите сюда описание изображения

введите сюда описание изображения

import { useState } from "react";
import AddCardList from "../../components/TrelloList/AddCardList/AddCardList";
import TrelloList from "../TrelloList/TrelloList";
import TrelloData from "../../trellodata";
import ContextAPI from "../../ContextAPI";
import { v4 as uuidv4 } from "uuid";
import styles from "./App.module.css";

function App() {
  const [data, setData] = useState(TrelloData);

  const updateListTitle = (updatedTitle, listId) => {
    const list = data.lists[listId];
    list.title = updatedTitle;
    setData({
      ...data,
      lists: {
        ...data.lists,
        [listId]: list,
      },
    });
  };

  const addCard = (title, listId) => {
    const newCardId = uuidv4();

    const newCard = {
      id: newCardId,
      title,
    };

    const list = data.lists[listId];
    list.cards = [...list.cards, newCard];
    setData({
      ...data,
      lists: {
        ...data.lists,
        [listId]: list,
      },
    });
  };

  const addList = (title) => {
    const newListId = uuidv4();
    setData({
      listIds: [...data.listIds, newListId],
      list: {
        ...data.lists,
        [newListId]: {
          id: newListId,
          title,
          cards: [],
        },
      },
    });
  };

  return (
    <ContextAPI.Provider value={{ updateListTitle, addCard, addList }}>
      <div className={styles.root}>
        <div className={styles.container}>
          {data.listIds.map((listID) => {
            const list = data.lists[listID];
            return <TrelloList list={list} key={listID} />;
          })}
          <div>
            <AddCardList type="list" />
          </div>
        </div>
      </div>
    </ContextAPI.Provider>
  );
}

export default App;



const TrelloData = {
  lists: {
    "01list": {
      id: "01list",
      title: "To do",
      cards: [
        {
          id: "01card",
          title: "Doing homework",
        },
        {
          id: "02card",
          title: "Walking",
        },
        {
          id: "03card",
          title: "Cleaning",
        },
      ],
    },
    "02list": {
      id: "02list",
      title: "In progress",
      cards: [],
    },
  },
  listIds: ["01list", "02list"],
};

export default TrelloData;

Ответы (1 шт):

Автор решения: ReinRaus

У Вас опечатка в функции addList - вместо свойства lists устанавливается свойство list.

→ Ссылка