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个团队，我希望显示一条消息。应该有一条消息说insert team here。所以应该是：

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>

我还修复了您的钥匙。

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

Answer 2

您可以使用函数来确保阵列上始终具有最小大小，以填充空白点：

const teams = [
   {
     name: 'Liverpool'
   },
   {
     name: 'Chelsea'
   },
   {
     name: 'Fulham'
   }
]

const padArray = (arrayIn, size, filler) =>   Array.from(
  new Array(Math.max(size, arrayIn.length)).keys()
).map((i) => arrayIn[i] || { name: filler })
 
const result = padArray(teams, 5, 'Insert team here');

console.dir(result)

然后您可以运行padArray(teams, 5, 'Insert team here').map而不是teams.map

或者，您可以使用Array.fill，如@ praveen-kumar-purushothaman建议的那样：

teams.fill({ name: "Insert team here" }, 5, teams.length).map() // etc.

当更少的项目映射到数组时如何显示不同的内容

2 个答案: