Reactjs 对对象数组使用Find（）函数，然后使用result props（JSX）

主要情况是下一种情况：我想使用当前url作为参数，以便查找和使用该对象的道具。我的问题。。。我想知道这是否是我应该使用的假设方法，我愿意听听你的想法

'''

类Lista扩展了React.Component{
构造函数（）{
超级（）；
此.state={
服务：[{
servicio:“Comerciales”，
视频：''，
描述：“‘知识产权’是一位杰出的发明者。发明者，不可撤销的权利与非法律性质的法律性质相同！不可撤销的法律性质的法律性质。”，
链接：“/servicios/comerciales”，
身份证号码：0
},
{
servicio：“事件”，
视频：''，
描述：“‘知识产权’是一位杰出的发明者。发明者，不可撤销的权利与非法律性质的法律性质相同！不可撤销的法律性质的法律性质。”，
链接：'/servicios/eventos'，
身份证号码：1
},
{
servicio：“品牌化”，
视频：''，
描述：“‘知识产权’是一位杰出的发明者。发明者，不可撤销的权利与非法律性质的法律性质相同！不可撤销的法律性质的法律性质。”，
链接：“/servicios/branding”，
身份证号码：2
},
{
servicio:“Tecnicos”，
视频：''，
描述：“‘知识产权’是一位杰出的发明者。发明者，不可撤销的权利与非法律性质的法律性质相同！不可撤销的法律性质的法律性质。”，
链接：“/servicios/tecnicos”，
身份证号码：3
},
{
servicio:“歌剧院”，
视频：''，
描述：“‘知识产权’是一位杰出的发明者。发明者，不可撤销的权利与非法律性质的法律性质相同！不可撤销的法律性质的法律性质。”，
链接：“/servicios/operacion con dron”，
身份证号码：4
}
]
}
}
渲染（道具）{
返回(
this.state.servicicios.find（（lista=>lista.link==props.match.url）=>(
))
)
}
}

'''

正如所料，代码本身实际上是不完整的，甚至我也可以让它显示整个列表，但出于某种原因，我现在完全陷入了这个问题。如果我取得进展，我会更新。干杯

如果存在匹配的服务对象，那么使用查找匹配的服务对象是正确的

如果存在匹配项，您可以将服务对象作为道具传递给

servicicio

组件。您必须通过

this.props

访问类组件中的道具

render() {
  const service = this.state.servicios.find(
    service => service.link === this.props.match.url
  )
  if (service) {
    return <Servicio {...service} /> // this will pass `servicio`, `video`, `link`, `desscription`, and `id` as props
  }

  return <p>Not Found</p> // or whatever you want to return
}

render（）{
const service=this.state.servicios.find(
service=>service.link==this.props.match.url
)
如果（服务）{
return//这将传递'servicio'，'video'，'link'，'desscription'和'id'作为道具
}
return未找到
//或任何要返回的内容
}

您可以使用

map

方法迭代数组，并使用

if

条件检查

props.match.url

与每个对象中的链接键匹配并返回

类Lista扩展了React.Component{
构造函数（）{
超级（）；
此.state={
服务：[{
servicio:“Comerciales”，
视频：''，
描述：“‘知识产权’是一位杰出的发明者。发明者，不可撤销的权利与非法律性质的法律性质相同！不可撤销的法律性质的法律性质。”，
链接：“/servicios/comerciales”，
身份证号码：0
},
{
servicio：“事件”，
视频：''，
描述：“‘知识产权’是一位杰出的发明者。发明者，不可撤销的权利与非法律性质的法律性质相同！不可撤销的法律性质的法律性质。”，
链接：'/servicios/eventos'，
身份证号码：1
},
{
servicio：“品牌化”，
视频：''，
描述：“‘知识产权’是一位杰出的发明者。发明者，不可撤销的权利与非法律性质的法律性质相同！不可撤销的法律性质的法律性质。”，
链接：“/servicios/branding”，
身份证号码：2
},
{
servicio:“Tecnicos”，
视频：''，
描述：“‘知识产权’是一位杰出的发明者。发明者，不可撤销的权利与非法律性质的法律性质相同！不可撤销的法律性质的法律性质。”，
链接：“/servicios/tecnicos”，
身份证号码：3
},
{
servicio:“歌剧院”，
视频：''，
描述：“‘知识产权’是一位杰出的发明者。发明者，不可撤销的权利与非法律性质的法律性质相同！不可撤销的法律性质的法律性质。”，
链接：“/servicios/operacion con dron”，
身份证号码：4
}
]
}
render() {
  const service = this.state.servicios.find(
    service => service.link === this.props.match.url
  )
  if (service) {
    return <Servicio {...service} /> // this will pass `servicio`, `video`, `link`, `desscription`, and `id` as props
  }

  return <p>Not Found</p> // or whatever you want to return
}

class Lista extends React.Component {
  constructor () {
      super();

      this.state = {
          servicios : [{
              servicio : 'Comerciales',
              video : '',
              descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
              link : '/servicios/comerciales',
              id : 0
          },
          {
              servicio : 'Eventos',
              video : '',
              descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
              link : '/servicios/eventos',
              id : 1
          },
          {
              servicio : 'Branding',
              video : '',
              descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
              link : '/servicios/branding',
              id : 2
          },
          {
              servicio : 'Tecnicos',
              video : '',
              descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
              link : '/servicios/tecnicos',
              id : 3
          },
          {
              servicio : 'Operacion con Dron',
              video : '',
              descripcion : 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, aliquid nulla harum illo eius cumque esse error similique molestiae molestias non eligendi! Ex laboriosam consequatur laborum recusandae aut ullam velit.',
              link : '/servicios/operacion-con-dron',
              id : 4
          }
          ]
      }
  }

  render() {
    return (
        <>{this.state.servicios.map(lista =>{
          if(lista.link == this.props.match.url) {
            return (<Servicio/>);
        }})
        }
        </>
  )
  
}
}