未捕获的类型错误：无法读取未定义的属性“laneId”以添加卡答案

【问题标题】：Uncaught TypeError: Cannot read property 'laneId' of undefined for add card未捕获的类型错误：无法读取未定义的属性“laneId”以添加卡
【发布时间】：2021-04-25 20:51:33
【问题描述】：

添加卡片并将数据添加到表中后，我想使用从表返回的原始卡片 ID 更新卡片详细信息。为此，我使用了这样的 eventBusHandle：

import React, {Component, useEffect, useState} from 'react';
import Board from "react-trello";


const TaskBoard = (props) =>{
const [eventBus, setEventBus] = useState(undefined);

useEffect(() => {
        if (card.length !== 0) {
            eventBus.publish({type: 'ADD_CARD', laneId:card.column_id, cards: {id: card.id, title: card.title, label: "1 sec", description: card.description}});
        }
    }, [card.length]);

return(
        <Board
        id="board1"
        components={components}
        style={{
            background: '#F1F2F4'
        }}
        data={boardData}
        draggable
        handleLaneDragStart={handleLaneDragStart}
        handleLaneDragEnd={handleLaneDragEnd}
        canAddLanes
        onLaneAdd={onLaneAdd}
        onLaneDelete={onLaneDelete}
        handleDragEnd={handleDragEnd}
        onCardDelete={onCardDelete}
        onCardAdd={onCardAdd}
        editable
        eventBusHandle={setEventBus}
        />
    );

}

我需要更新真实卡号才能删除或移动其他地方。

【问题讨论】：

publish() 来自哪里？
嗨 @yudhiesh，react-trello 提供 .publish() 钩子来添加/更新/删除卡.. 你可以在这里查看 - github.com/rcdexta/react-trello

标签： reactjs trello

【解决方案1】：

在您的代码中，无法知道卡信息的来源。发布方法将使用“已定义”信息更新板信息。所以在使用该方法之前需要有一张定义好的卡片。

另外，setEventBus 发生在开发板创建（安装）之后。如果您尝试在 setEventBus 发生之前使用 publish() 更新板，它将不起作用。

所以我会使用此代码来更新卡：

const onCardAddHandler = (card, laneId) => {
  eventBus.publish({
    type: 'UPDATE_CARD', //use this type instead of ADD_CARD
    laneId:laneId,
    card: {
      id: card.id,
      title: card.title,
      label: "1 sec",
      description: card.description
    }
  });
}

然后在您的 Board 中，像这样替换您的 onCardAdd：

<Board
  id="board1"
  components={components}
  style={{ background: '#F1F2F4' }}
  data={boardData}
  draggable
  handleLaneDragStart={handleLaneDragStart}
  handleLaneDragEnd={handleLaneDragEnd}
  canAddLanes
  onLaneAdd={onLaneAdd}
  onLaneDelete={onLaneDelete}
  handleDragEnd={handleDragEnd}
  onCardDelete={onCardDelete}
  onCardAdd={onCardAddHandler}. //here I collect de card information
  editable
  eventBusHandle={setEventBus}
/>

【讨论】：