javascript - 数组映射并根据对象值填充结果

Question

我有一个功能

const [tasks, setTasks] = useState([])     

const addTask = (title, role) => {
        const newTasks = [...tasks, { title, role}]
        setTasks(newTasks)
}

提交每个表单，addTask 函数创建包含对象数组的状态数据

[
{title: "make a coffee", role: "employee"},
{title: "react the sales target", role: "salesman"},
{title: "clean the room", role: "employee"},
{title: "call the client", role: "boss"},
]

我想根据 Angular 色填充任务

const TaskList = ({ tasks }) => {
    return (
        <Container>
            <Row>
                {tasks.map((task, index) =>
                        <Col sm="12" md="4">
                            <h4 style={{ textAlign: 'center' }}>
                                {task.role} 
                            </h4>
                            <TaskCard task={task} index={index} />
                        </Col>
                )}
            </Row>
        </Container>
    )
}

const TaskCard = ({ task, index, completeTask, editTask, removeTask }) => {
    return (
        <Container className="mb-3">
            <Card body inverse color={task.completed ? 'success' : 'danger'}>
                <CardText>{task.title}</CardText>
                <p></p>
                <div className="Card-btn">
                    <i className="fas fa-check-circle fa-2x fa-fw" onClick={() => completeTask(index)}></i>
                    <i className="fas fa-pen fa-2x fa-fw" onClick={() => editTask(index)}></i>
                    <i className="fas fa-trash-alt fa-2x fa-fw" onClick={() => removeTask(index)}></i>
                </div>
            </Card>
        </Container>
    )
}

但不是为每个 Angular 色创建任务列表列，而是创建新 Angular 色卡

如何根据 Angular 色在列中填充任务？我应该先过滤吗？

Answer 1

您需要稍微修改一下您的任务数组。您需要按 Angular 色对数据进行分组。为此，我建议使用 Map .

const tasks = [
  { title: 'make a coffee', role: 'employee' },
  { title: 'react the sales target', role: 'salesman' },
  { title: 'clean the room', role: 'employee' },
  { title: 'call the client', role: 'boss' },
];

const m = new Map();

for (const task of tasks) {
  const {role, title} = task;
  if (m.has(role)) {
    const temp = m.get(role);
    m.set(role, [...temp, title]) 
  }else {
    m.set(role, [title])
  }
}

console.log(m);

现在，您可以遍历 map ，对于每个 Angular 色，都会有一系列任务，您可以再次遍历这些任务以创建任务卡。
看看下面的代码片段:

const tasks = [
  { title: "make a coffee", role: "employee" },
  { title: "react the sales target", role: "salesman" },
  { title: "clean the room", role: "employee" },
  { title: "call the client", role: "boss" },
];

function App() {
  const renderItems = () => {
    const m = new Map();
    for (const task of tasks) {
      const { role, title } = task;
      if (m.has(role)) {
        const temp = m.get(role);
        m.set(role, [...temp, title]);
      } else {
        m.set(role, [title]);
      }
    }

    const renderArr = [];
    for (let item of m) {
      renderArr.push(<TaskList role={item[0]} />);
      for (let it of item[1]) {
        renderArr.push(<TaskCard task={it} />);
      }
    }
    return renderArr;
  };

  return renderItems();
}

const TaskList = ({ role }) => <h1>{role}</h1>;

const TaskCard = ({ task }) => <p>{task}</p>;

ReactDOM.render(<App />, document.getElementById("react"));

<div id="react"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>