node.js - 无法从节点 api 获取数据到看板

Question

我正在尝试为我的网站（MERN 应用程序）构建看板。当我使用本地数据时，我的看板可以正常工作。但是我很难从我的 API 获取数据到我的看板。

在我的看板中，我有三种状态

1. 计划
2. 进行中
3. 居住

所以，我想知道如何获取所有这三种状态的数据。看板代码：

import React, { useEffect, useState } from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { useSelector, useDispatch } from "react-redux";
import uuid from "uuid/v4";
import { fetchFeedbacksByStatus, getFeedbacks } from "../../actions/feedbacks";
import RoadmapHeader from "./RoadmapHeader";

let plannedFeatures = [];
let inProgressFeatures = [];
let liveFeatures = [];

const itemsFromBackend = [
  {
    id: uuid(),
    content: "First task",
    description:
      "Swiping to change tabs is intuitive for Mobile users who are already used to this behavior from popular apps like WhatsApp",
  },
  {
    id: uuid(),
    content: "Second task",
    description:
      "Swiping to change tabs is intuitive for Mobile users who are already used to this behavior from popular apps like WhatsApp",
  },
  {
    id: uuid(),
    content: "Third task",
    description:
      "Swiping to change tabs is intuitive for Mobile users who are already used to this behavior from popular apps like WhatsApp",
  },
  {
    id: uuid(),
    content: "Fourth task",
    description:
      "Swiping to change tabs is intuitive for Mobile users who are already used to this behavior from popular apps like WhatsApp",
  },
  {
    id: uuid(),
    content: "Fifth task",
    description:
      "Swiping to change tabs is intuitive for Mobile users who are already used to this behavior from popular apps like WhatsApp",
  },
];

const columnsFromBackend = {
  [uuid()]: {
    name: "Planned",
    subTitle: "Ideas prioritized for research",
    items: itemsFromBackend,
  },
  [uuid()]: {
    name: "In-Progress",
    subTitle: "Currently being developed",
    items: [],
  },
  [uuid()]: {
    name: "Live",
    subTitle: "Released features",
    items: [],
  },
};

const onDragEnd = (result, columns, setColumns) => {
  if (!result.destination) return;
  const { source, destination } = result;

  if (source.droppableId !== destination.droppableId) {
    const sourceColumn = columns[source.droppableId];
    const destColumn = columns[destination.droppableId];
    const sourceItems = [...sourceColumn.items];
    const destItems = [...destColumn.items];
    const [removed] = sourceItems.splice(source.index, 1);
    destItems.splice(destination.index, 0, removed);
    setColumns({
      ...columns,
      [source.droppableId]: {
        ...sourceColumn,
        items: sourceItems,
      },
      [destination.droppableId]: {
        ...destColumn,
        items: destItems,
      },
    });
    // console.log(columns);
  } else {
    const column = columns[source.droppableId];
    const copiedItems = [...column.items];
    const [removed] = copiedItems.splice(source.index, 1);
    copiedItems.splice(destination.index, 0, removed);
    setColumns({
      ...columns,
      [source.droppableId]: {
        ...column,
        items: copiedItems,
      },
    });
  }
};

const Roadmap = () => {
  const [columns, setColumns] = useState(columnsFromBackend);
  const feedbacks = useSelector((state) => state.feedbacks);
  const dispatch = useDispatch();

  feedbacks &&
    feedbacks.forEach((feedback) => {
      //   console.log(feedback);
      if (feedback.status === "planned") {
        plannedFeatures = [...plannedFeatures, feedback];
        // plannedFeatures.push(feedback);
      } else if (feedback.status === "in-progress") {
        inProgressFeatures = [...inProgressFeatures, feedback];
        // inProgressFeatures.push(feedback);
      } else if (feedback.status === "live") {
        liveFeatures = [...liveFeatures, feedback];
        // liveFeatures.push(feedback);
      } else {
        return;
      }
    });

  console.log(plannedFeatures, inProgressFeatures, liveFeatures);

  return (
    <div className="row-start-2 row-end-3 col-start-1 col-end-2 mx-auto">
      <RoadmapHeader />
      <div className="w-full max-w-5xl mt-10 flex h-screen">
        <DragDropContext
          onDragEnd={(result) => onDragEnd(result, columns, setColumns)}
        >
          {Object.entries(columns).map(([columnId, column], index) => {
            let borderColor;
            switch (column.name) {
              case "Planned":
                borderColor = "border-status-planned";
                break;
              case "In-Progress":
                borderColor = "border-status-in-progress";
                break;
              default:
                borderColor = "border-status-live";
            }
            return (
              <div className="flex flex-col" key={columnId}>
                <h1 className="text-primary-dark font-bold">{column.name}</h1>
                <p className="text-secondary-dark text-sm">{column.subTitle}</p>
                <div className="my-2">
                  <Droppable droppableId={columnId} key={columnId}>
                    {(provided, snapshot) => {
                      return (
                        <div
                          {...provided.droppableProps}
                          ref={provided.innerRef}
                          className="py-4 pr-6 w-80"
                        >
                          {column.items.map((item, index) => {
                            return (
                              <Draggable
                                key={item.id}
                                draggableId={item.id}
                                index={index}
                              >
                                {(provided, snapshot) => {
                                  return (
                                    <div
                                      ref={provided.innerRef}
                                      {...provided.draggableProps}
                                      {...provided.dragHandleProps}
                                      className={`p-4 mb-2 bg-white rounded-lg border-t-4 ${borderColor}`}
                                    >
                                      <h2
                                        className={`text-primary-dark font-bold `}
                                      >
                                        {item.content}
                                      </h2>
                                      <p className="text-secondary-dark text-sm">
                                        {item.description}
                                      </p>
                                    </div>
                                  );
                                }}
                              </Draggable>
                            );
                          })}
                          {provided.placeholder}
                        </div>
                      );
                    }}
                  </Droppable>
                </div>
              </div>
            );
          })}
        </DragDropContext>
      </div>
    </div>
  );
};

export default Roadmap;

我正在使用 redux 进行状态管理。

Github 回购链接：https ://github.com/rishipurwar1/product-feedback-react-app

任何人请帮我解决这个问题

标签： node.jsreactjsmongodbreact-beautiful-dnd