0
import React, { useState, useEffect } from 'react';
import '../../stylesBoard/board.css';
import List from './List';
import api from '../../api/request';
import dragOnDrop from './dragOnDrop';

function Board() {
  const [title, setTitle] = useState("Моя тестова дошка");

  const [boards, setBoards] = useState({});
  const [listCreate, setListCreate] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const [position, setPosition] = useState(1);
  const [createListCounter, setCreateListCounter] = useState(0);
  function handleCreateList() {
    if (createListCounter === 1) {
      postResponse();
    } else {
      setListCreate(true);
      setCreateListCounter(createListCounter + 1);
    }
  }
  function handleInputChange(event:any) {
    setInputValue(event.target.value);
  }
  const id = window.location.pathname.split("/").pop();
  async function postResponse() {
    try {
      if(inputValue.trim()!==""){
        await api.post(`https://trello-back.shpp.me/maliiev/api/v1/board/${id}/list`, {
          title: inputValue,
          position:2
        });
        setListCreate(false);
        setInputValue("");
        setCreateListCounter(0);
    }
    } catch (error) {
      console.error("Ошибка при добавлении списка:", error);
    }
  }
  useEffect(() => {
    async function getResponse() {
      const data=await api.get(`https://trello-back.shpp.me/maliiev/api/v1/board/${id}`);
      setBoards(data);
     }
     getResponse();
  },[])
  return (
    <div className="Board">
      <div className='container'>
        <header className='Board__header'>
          <button className="Board__header-btn btn" type="submit">&#8592; домой</button>
          <p className='Board__header-title'>{title}</p>
          <div className='Board__header-block'></div>
        </header>
        <section className='Board__section'>
        {"lists" in boards?(
            boards.lists.map((item:any)=>{
              return <List title={item.title} cards={item.cards}/>
            })
          ):(
            <p>Loading...</p>
          )
        }
          <div className='Board__list' draggable="true">
            <input className="Board__section-btn" type='submit' value="+ Додати список" onClick={handleCreateList} />
            {listCreate && <input type="text" value={inputValue} onChange={handleInputChange} />}
          </div>
        </section>
      </div>
    </div>
  );
}

export default Board;
7
  • Где именно в вашем коде вы эту ошибку получаете?
    – SwaD
    Commented 21 дек. 2023 в 17:31
  • в jsx коде. boards.lists Commented 21 дек. 2023 в 17:42
  • 1
    "lists" in boards --- а что это за конструкция? Она легальная? Commented 21 дек. 2023 в 18:02
  • А что непонятного в ошибке? У вас boards unknown и логично почему. Commented 22 дек. 2023 в 0:03
  • Я реально немогу понять что нетак и как это пофиксить Commented 22 дек. 2023 в 11:00

1 ответ 1

0

Ошибка происходит потому что вы не указали тип переменной boards

Вот как можно это исправить:

interface IBoards {
  lists?: any // тут тип листа
}

function Board() {
  // ...
  const [boards, setBoards] = useState<IBoards>({});
  // ...

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.