javascript - 使用 JS 计算多个数组中的 # 个元素

Question

我正在尝试计算 taskIds 中所有 columns 中现有元素的数量。不确定最有效的方法是什么，因为我已经在 return 语句中映射数据。我希望能够在 CustomHeader 中传递总数。期望值应该返回 5

我有这个组件:

const Example = () => {

  const [state] = useContext(DataContext);
  const count = 0;
  return (
    <>
      <div
        title={<CustomHeader title="Things to do" size="18px" count={count} />}
      >
        {state.columnOrder.map(columnId => {
          const column = state.columns[columnId];
          const tasks = column.taskIds.map(taskId => state.tasks[taskId]);
          return <Item key={column.id} column={column} tasks={tasks} />;
        })}
      </div>
    </>
  );
};

export default Example;

这是我的 DataContext:

tasks: {
        "task-1": { id: "task-1", description: "Test" },
        ...
      },
      columns: {
        "column-1": {
          id: "column-1",
          taskIds: ["task-1", "task-2", "task-3", "task-4"]
        },
        "column-2": {
          id: "column-2",
          title: "column-2",
          taskIds: ["task-5"]
        },
        "column-3": {
          id: "column-3",
          title: "column-3",
          taskIds: []
        }
      },

      columnOrder: ["column-1", "column-2", "column-3"]

    };

Answer 1

您可以使用 Object.values()在您所在州的 .columns 对象上。这将为您提供一个对象数组，这些对象是 columns 对象中的值。使用 .reduce()然后，您可以对每个 taskIds 数组的长度求和，方法是获取 .length 并将其添加到累积和 acc:

const state = { tasks: { "task-1": { id: "task-1", description: "Test" }, }, columns: { "column-1": { id: "column-1", taskIds: ["task-1", "task-2", "task-3", "task-4"] }, "column-2": { id: "column-2", title: "column-2", taskIds: ["task-5"] }, "column-3": { id: "column-3", title: "column-3", taskIds: [] } }, columnOrder: ["column-1", "column-2", "column-3"] };

const getCount = state =>
  Object.values(state.columns).reduce((acc, {taskIds}) => acc+taskIds.length, 0);
  
console.log(getCount(state));