javascript - 当项目较少时如何在数组上映射时显示不同的内容

Question

我有一个显示团队列表的 react 组件。

const teams = [
   {
     name: 'Liverpool'
   },
   {
     name: 'Chelsea'
   },
   {
     name: 'Fulham'
   }
]

然后我在 React 组件中展示这些团队。

render() {
   return(
     <div>
      {teams.map(team => {
        return <p key={team.name}>{team.name}</p>
      });
     </div>
   )
}

这工作正常，但我希望如果阵列中的团队少于 5 个，就会显示一条消息。应该有一条消息显示在此处插入团队。所以应该是:

Liverpool 
Chelsea
Fulham
Insert team here
Insert team here

这有道理吗？基本上应该始终有 5 个框，其中包含团队名称，如果未满，则应显示不同的消息。

我需要某种 if 语句，但不确定执行此操作的最佳方法。如果需要更多信息，请告诉我。

数据来自 API，因此如果可以避免的话，我真的不想更改它。我可以在渲染方法中做些什么吗？

Answer 1

您可以考虑至少循环 5 次。这样你就有了类似 .fill():

if (teams.length < 5) {
  const origLength = teams.length;
  teams.length = 5;
  teams = teams.fill({ name: "Insert team here" }, origLength, 5);
}

完整的工作解决方案

class App extends React.Component {
  render() {
    let teams = [{ name: "Chelsea" }, { name: "Liverpool" }];
    if (teams.length < 5) {
      const origLength = teams.length;
      teams.length = 5;
      teams = teams.fill({ name: "Insert team here" }, origLength, 5);
    }
    return (
      <div>
        {teams.map((team, key) => {
          return <p key={key}>{team.name}</p>;
        })}
      </div>
    );
  }
}

工作片段

class App extends React.Component {
  render() {
    let teams = [{ name: "Chelsea" }, { name: "Liverpool" }];
    if (teams.length < 5) {
      const origLength = teams.length;
      teams.length = 5;
      teams = teams.fill({ name: "Insert team here" }, origLength, 5);
    }
    return (
      <div>
        {teams.map((team, key) => {
          return <p key={key}>{team.name}</p>;
        })}
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

<div id="root"></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>

我还修复了你的 key 。

演示: https://codesandbox.io/s/ymjym0z7lx
直接链接: https://ymjym0z7lx.codesandbox.io/