Question

我正在研究ProductListPage组件，目的是在搜索返回结果时显示多个项目。我目前正在尝试进行循环，而我可能会出错的部分是关键，但也可能是另一部分。

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

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

Answer 1

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

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

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

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

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

如何在React中浏览搜索结果？

1 个答案: