javascript - 映射 react 中的所有非空对象

Question

我正在使用 Framer X(它使用 React)来生成一堆组件。我有一个像这样的对象数组:

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>
            )
        })}

结果会生成两个div，好像数组的长度是2。如何才能只渲染非空对象？

Answer 1

只需检查 map 中的对象是否非空。或者，使用 .filter()。

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