添加卡时无法读取@lourenci/react-kanban中未定义的属性'cards'

Question

我正在测试 react-kanban before I use it for my project. and I have created this code here at codesandbox.io。

  import React,{useEffect , useState} from 'react'
  import Board, { addCard } from '@lourenci/react-kanban'
  import '@lourenci/react-kanban/dist/styles.css'

  export default function Index() {

    const [board, setBoard] = useState({
      columns: [
        {
          id: 1,
          title: 'Backlog',
          cards: [
            {
              id: 1,
              title: 'Add card',
              description: 'Add capability to add a card in a column'
            },
          ]
        },
        {
          id: 2,
          title: 'Doing',
          cards: [
            {
              id: 2,
              title: 'Drag-n-drop support',
              description: 'Move a card between the columns'
            },
          ]
        }
      ]
    }
    )
    const addcard =(e)=>{
      const newBoard = addCard(board,1,{
        id: 3,
        title: "dfdfdfdff",
        description: "SDfsfsf"
      })
      setBoard(newBoard)
    }

      useEffect(() => {
        console.log("fetch packages")
      }, [])
    
      return (
        <div>
          <button onClick={addcard} >Add Card</button>
          <Board>{board}</Board>
        </div>
      )
  }

挑战在于我正在使用他们的助手将卡片添加到面板中的列，但它返回错误。我做错了什么？还是错误？

TypeError
Cannot read property 'cards' of undefined

提前感谢您的帮助。

Answer 1

您有一个受控板，因此根据他们的 props API 文档，addCard 无效。

编辑： 正如@Naren 回答的那样，addCard 实用程序确实实际上有效。我将我的回答作为手动更新传递给 Board 组件的数据的示例，它们只是“镜像”。

您需要自行管理看板数据。这是一个示例 addcard 处理程序：

const addcard = (e) => {
  setBoard(board => ({
    ...board,
    columns: board.columns.map(column => column.id === 1 ? {
      ...column,
      cards: [...column.cards, {
        id: 3,
        title: "dfdfdfdff",
        description: "SDfsfsf"
      }]
    } : column)
  }));
};

Answer 2

我已经完成了 documentation，不幸的是没有足够的示例来说明如何使用 addCard。如果你看到下图，addCard 的第二个参数是 inColumn 但他们没有提到输入是什么，是 id 列还是任何其他列。所以我尝试调试并发现 inColumn 是一个 Object 列 id.

 const addcard = (e) => {
    const newBoard = addCard(board, { id: 1 } <-- this is the input of column, { 
      id: 2,
      title: "dfdfdfdff",
      description: "SDfsfsf"
    });
    setBoard({...newBoard});
  };

注意：据我所知，您需要手动处理每张卡片的id。否则您会在控制台中看到警告。

我已经更新了您的示例，它正在运行

添加卡时无法读取@lourenci/react-kanban中未定义的属性'cards'

Cannot read property 'cards' of undefined in @lourenci/react-kanban when adding a card

javascript

reactjs

use-state