как показать различный контент при отображении на массив, когда меньше элементов

Question

У меня есть компонент реагирования, который показывает список команд.

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

Затем я показываю эти команды в компоненте реакции.

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

Это работает нормально, но я хочу, чтобы там было сообщение, если в массиве меньше 5 команд. Должно быть сообщение «1007». Так и должно быть:

Liverpool 
Chelsea
Fulham
Insert team here
Insert team here

Имеет ли это смысл. Обычно должно быть 5 полей с названиями команд, и если они не заполнены, то должно отображаться другое сообщение.

Мне нужно что-то вроде if, но я не уверен, что это лучший способ сделать это. Дайте мне знать, если потребуется дополнительная информация.

Данные поступают из API, поэтому я не хочу менять это, если смогу избежать этого. Что я могу сделать в методе рендеринга?

Answer 1

Вы можете использовать функцию, чтобы гарантировать, что у вас всегда есть минимальный размер вашего массива, заполняя пустые места:

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.

Answer 2

Вы можете рассмотреть цикл по крайней мере 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/