javascript - 如何同时映射3个或更多数组

Question

同时映射 3 个或更多数组的最佳方法或最佳实践是什么？

对于这个例子:

首先，我按团队名称过滤数据，然后通过它们进行映射以显示它们

(在此示例中，我想使用 <div key={index} className={styles.member}> .... </div> 仅一次来减少编码，因为它们完全相同)

--您可以自由更改代码中的过滤器或映射方法--

function MyApp() {
  const managementTeam = members.filter((m) => m.team === "management");
  const developmentTeam = members.filter((m) => m.team === "development");
  const uxTeam = members.filter((m) => m.team === "UX");
  const contentTeam = members.filter((m) => m.team === "content");

  const development = developmentTeam.map((m, index) => (
    <div key={index} className={styles.member}>
      <figure>
        <img className="image-cover" src={m.image} alt={m.faName} />
      </figure>
      <div className={styles.info}>
        <h3>{m.faName}</h3>
        <div className={styles.titleWrapper}>
          <div
            className={styles.snackItem}
            style={{ backgroundColor: m.background }}>
            {m.position}
          </div>
        </div>
      </div>
    </div>
  ));

  const management = managementTeam.map((m, index) => (
    <div key={index} className={styles.member}>
      <figure>
        <img className="image-cover" src={m.image} alt={m.faName} />
      </figure>
      <div className={styles.info}>
        <h3>{m.faName}</h3>
        <div className={styles.titleWrapper}>
          <div
            className={styles.snackItem}
            style={{ backgroundColor: m.background }}>
            {m.position}
          </div>
        </div>
      </div>
    </div>
  ));

  const ux = uxTeam.map((m, index) => (
    <div key={index} className={styles.member}>
      <figure>
        <img className="image-cover" src={m.image} alt={m.faName} />
      </figure>
      <div className={styles.info}>
        <h3>{m.faName}</h3>
        <div className={styles.titleWrapper}>
          <div
            className={styles.snackItem}
            style={{ backgroundColor: m.background }}>
            {m.position}
          </div>
        </div>
      </div>
    </div>
  ));

  const content = contentTeam.map((m, index) => (
    <div key={index} className={styles.member}>
      <figure>
        <img className="image-cover" src={m.image} alt={m.faName} />
      </figure>
      <div className={styles.info}>
        <h3>{m.faName}</h3>
        <div className={styles.titleWrapper}>
          <div
            className={styles.snackItem}
            style={{ backgroundColor: m.background }}>
            {m.position}
          </div>
        </div>
      </div>
    </div>
  ));

  return (
    <div className={styles.wrapper}>
        <div className={styles.membersWrapper}>
          <div>{management}</div>
          <div>{development}</div>
          <div>{ux}</div>
          <div>{content}</div>
        </div>
    </div>
  );

Answer 1

其中很多答案都很好且清晰，但我不喜欢它们都在数组上使用多次迭代，而您可以使用reduce一次性完成所有操作。示例:

const Team = ({ image, faName, background, position }) => (
  <div className={styles.member}>
    <figure>
      <img className="image-cover" src={image} alt={faName} />
    </figure>
    <div className={styles.info}>
      <h3>{faName}</h3>
      <div className={styles.titleWrapper}>
        <div
          className={styles.snackItem}
          style={{ backgroundColor: background }}
        >
          {position}
        </div>
      </div>
    </div>
  </div>
);

export default function App() {
  const teams = members.reduce((acc, current, index) => {
    const team = current.team;
    const content = <Team key={index} {...current} />;

    if (team in acc) {
      acc[team].push(content);
    } else {
      acc[team] = [content];
    }
    return acc;
  }, {});

  console.log(teams);

  return (
    <div className={styles.wrapper}>
      <div className={styles.membersWrapper}>
        <div>{teams.management}</div>
        <div>{teams.development}</div>
        <div>{teams.ux}</div>
        <div>{teams.content}</div>
      </div>
    </div>
  );
}

如果您需要使每个团队都不同并且无法使用一个组件，那么您可以创建单独的组件并使用 switch 语句而不是 if (team in acc) 或者您可以使用 object 和键值对。