javascript - 根据深度嵌套数组的项目有条件地渲染组件

Question

我有一个 React 组件，它正在接收从 API 响应返回的数据对象。

我正在尝试编写一个函数，该函数接受来自该数据响应的字段，检查该字段内的元素并迭代它，检查数组内的每个对象是否有特定警报的值。

如果找到特定警报的值，我需要为该警报呈现一个图标。

数据对象如下所示:

location: {
  ...,
details: {
  summary: [
            {
             type: 'calling',
             icon: 'phone' 
             },
             {
             type: 'power',
             icon: 'electric' 
             },
             {
             type: 'water',
             icon: 'water-icon' 
             },
           ]
        }
      }               

这是我尝试有条件地渲染图标的部分(这是我的第一次尝试和初步尝试):

           <div>
            {location.alertDetails && (
                <IconBox title={`Alerts`}>
                  <IconSection>
                  {location.details.summary.includes(type === calling) && 
                   <CallIcon />
                   }
                   {location.details.summary.includes(type === power) && 
                   <ElectricIcon />
                   }
                  {location.details.summary.includes(type === water) && 
                   <WaterIcon />
                  }
                  </IconSection>
                </IconBox>
              )}
            </div>

Answer 1

您可以在组件状态中存储获取的类型数组:

const [types, setTypes] = useState(location.details.summary.map(({type}) => type))

这样，您就可以简单地有条件地渲染(或不渲染)图标:

 <div>
  {location.alertDetails && (
      <IconBox title={`Alerts`}>
        <IconSection>
           {types.includes('calling') && <CallIcon />} 
           {types.includes('power') && <ElectricIcon />}
           {types.includes('water') && <WaterIcon />}
        </IconSection>
      </IconBox>
    )}
  </div>

这是演示(所有组件都呈现为 <div> ，因为我没有这些组件):

const { render } = ReactDOM,
      { useState } = React
      
const apiData = {location:{details:{summary:[{type:'calling',icon:'phone'},{type:'power',icon:'electric'},{type:'water',icon:'water-icon'},]}}}    
      
const IconTray = ({data}) => {
  const [types, setTypes] = useState(data.location.details.summary.map(({type}) => type))
  return (
     <div>
        {data.location.details && (
            <div>
              <div>
                 {types.includes('calling') && <div>I am a CallIcon</div>} 
                 {types.includes('power') && <div>I am an ElectronIcon</div>}
                 {types.includes('water') && <div>I am a WaterIcon</div>}
              </div>
            </div>
          )}
     </div>
  )
}

render (
  <IconTray data={apiData} />,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>