映射反应中的所有非空对象

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

Answer 2

只要先用filter再用map

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

映射反应中的所有非空对象

mapping through all non-empty objects in react

javascript

arrays

reactjs

framerjs