时间戳

首页 > 解决方案 > 如何在 React 中循环浏览我的搜索结果？

reactjs - 如何在 React 中循环浏览我的搜索结果？

问题描述

我正在开发一个ProductListPage组件，目标是在搜索返回结果时显示多个项目。我目前正在尝试制作一个循环，我可能错的部分是关键，但它也可能是另一部分。

我通过搜索返回的数据数组的名称称为结果，我目前正试图抓住“名称”部分。我也很想制作图像，但我不确定您是否可以在一个循环中完成这两个操作，或者我是否需要做两个。任何提示或帮助将不胜感激！

const ProductList = ({ result }) => {
  const containerStyles = {
    height: '100vh',
    overflow: 'auto',
    textAlign: 'center',
    padding: '5vh'
  }
  console.log(result)
  return (
    <Grid container direction='column'>
      <div style={containerStyles}>
        {!result
          ? (
            <h1>No results found</h1>
          )
          : (
            <div>{result.map((name, id) => (
              <p key={id}>
                {result.name}
              </p>))}
            </div>
            // <img>{result[0].image}</img>
          )}
      </div>
    </Grid>
  )
}

export default ProductList

标签： reactjs

解决方案

假设结果数组包含以下形式的对象：

{
  name:"",
  id:1,
  image: ""
}

然后您的地图将如下所示：

{
  result.map((item) => (
          <p key={item.id}>
            {item.name} {item.image}
          </p>
  ))
}

其中 item 是数组中的一项 您可以在 map 回调函数中访问该项目中存在的任何属性。

推荐阅读