Question

如果元素未定义，如何不显示它

2023-01-05

607

javascript reactjs arrays object jsx

存在以下问题。我的页面上有 6 个 div，其中可能包含也可能不包含图像。假设我的数组中有 3 张图片，这些图片应该显示在 div 中，其余 3 个元素应该是一个 div（例如，带有背景）我大致解决了它，但如果在数组中找不到此元素，则应用程序崩溃。崩溃是因为缺少某个元素。在控制台中，出现 sixb[3] 未定义的错误。项目显示

<div className='blocksix all'>
    <img src={sixb[0].img} />
</div>
<div className='blocksix all'>
    <img src={sixb[1].img} />
</div>
<div className='blocksix all'>
    <img src={sixb[2].img} />
</div>
<div className='blocksix all'>
    <img src={sixb[3].img} />
</div>
<div className='blocksix all'>
    <img src={sixb[4].img} />
</div>
<div className='blocksix all'>
    <img src={sixb[5].img} />
</div>

元素数组

let [sixb , setsixb] = useState([
        {img:"https://www.zonkpro.ru/zonk/assets/dice/mini/1.png"},
        {id:2,title:2, img:"https://www.zonkpro.ru/zonk/assets/dice/mini/2.png" , style: 'none'},
        {id:3,title:3, img:"https://www.zonkpro.ru/zonk/assets/dice/mini/3.png" , style: 'none'},
        {id:4,title:4, img:"https://www.zonkpro.ru/zonk/assets/dice/mini/4.png" , style: 'none'},
        {id:5,title:5, img:"https://www.zonkpro.ru/zonk/assets/dice/mini/5.png" , style: 'none'},
        {id:6,title:6, img:"https://www.zonkpro.ru/zonk/assets/dice/mini/6.png" , style: 'none'},   
 ])

尚无想法如何解决

Answer 1

尝试三元运算符和可选链接

<div className='blocksix all'>
    {sixb?.[1]?.img ? <img src={sixb[1].img} /> : <div className='some-background'>No image</div>}
</div>

通用方法 -

{setsixb.map((item, index)=>{
   retrun <div className='blocksix all' key={index}>
             {item?.img ? <img src={item.img} /> : <div className='some-background'>No image</div>}
          </div>
  })
}

Answer 2

您可以在此场景中使用条件渲染。

<div className='blocksix all'>
    {sixb[0] && sixb[0].img && (<img src={sixb[0].img} />)}
</div>

注意：- 无需编写相同的 div 6 次，只需遍历数组并显示它们即可。

{
  sixb.map((each,index) => {
      return (
             <div key={index} className='blocksix all'>
                {each && each.img && (<img src={each.img} />)}
             </div>
      )
  })
}

对于 key ，我使用了索引，因为对象中没有任何唯一属性。如果您可以将 id 设为强制性的，则使用 id 作为键。

这样，代码更干净、更易读。

Answer 3

你应该试试这个，

<>
{sixb.map((element, index) => element?.img ? <div key={index} className="block-image"><img src="img" /></div> : <div key={index} className="no-image">No Image found</div>)}
</>