отображение через все непустые объекты в реакции

Question

Я использую Framer X (который использует реагирование) для генерации нескольких компонентов.У меня есть массив объектов, таких как:

const chosenBets = [{}, { id: 1
 label: "X"
 odd: 2.63
 oddIndex: 1
 team_home: "Bournemouth"
 team_away: "West Ham United"
 matchCardIndex: 1}]

Затем я сопоставляю массив:

        {props.chosenBets.map((match, i) => {
            return (
                <div key={i}>
                    {i}
                </div>
            )
        })}

Результатом будет генерирование двух делений, кажется, длина массива2. Как сделать так, чтобы отображались только непустые объекты?

Answer 1

сначала просто используйте filter, а затем map

{props.chosenBets.filter(v=> Object.keys(v).length).map((match, i) => {
       return (
       <div key={i}>
           {i}
       </div>
     )
 })}

Answer 2

Просто проверьте, не являются ли объекты непустыми в map.Или используйте .filter().

{props.chosenBets.map((match, i) => {
  if (Object.keys(match).length !== 0
    return (
      <div key={i}>
        {i}
      </div>
    );
})}