使在 html 中显示的 usestate() 中的对象的数组数据反应

Question

你们能帮帮我吗？我是新手学习反应。我有一个这样的反应页面。我已经制作了一个数据并将它们放在 useate() 中。你们能帮我制作以html显示的数组数据吗？我只是在学习 useState 函数。

import React, {useState}  from 'react';
import './Soal2.css';
import hamburger from './products/humburger.jpg';
import kimchi from './products/kimchi.jpg';
import topokki from './products/topokki.jpg'
import sushi from './products/sushi.jpg';

function Soal2() {

  const [listProducts, setListProducts] = useState([{
    menu: 'Humburger',
    gambar: {hamburger},
    harga: 10000
  },
  {
  menu: 'Kimchi',
  image: {kimchi},
  harga: 15000
  },
  {
  menu: 'Topokki',
  gambar: {topokki},
  harga: 20000
  },
  {
  menu: 'Sushi',
  gambar: {sushi},
  harga: 25000
  }])



    return (
  </div>  ---> array data showing up here
      </div>
    );
  }
  
  export default Soal2; 

要求是 const [listProducts, setListProducts] 和 useState([array of objects]) 不允许擦除。请帮帮我:(

我所做的只是像这样创建新的组件文件名 productitem.js：

function ProductItem(listProducts) {
return (
  <div>
      {listProducts}
  </div>
);

}

导出默认 ProductItem；

然后我将返回代码以使数组数据显示在 html 中：

{listProducts.map((item, index) => {
    return <ProductItem value={item} key={index}/>
  })}

但代码错误。有类似的东西：对象作为反应子无效（找到：带有键 {value} 的对象），bla bla ---> 错误代码

Answer 1

很抱歉没有完全理解您想要达到的目标。如果要在组件中显示数据，您可以这样做：

return (
   <div>
   {listProducts.map((item) => {
        <div>
            <p>item.menu</p>
            ...otherProps        
        </div>
    })
    }
   </div>
)

如果这不是您想要做的，请更具体地帮助您，谢谢！

Answer 2

只需使用映射来迭代 listProducts 数组：

return <div>
  listProducts.map((product, index) => {
    const key = `product-${product.menu}-${index}`

    return <div key={key}>
      <img src={product.gambar} />
      <span>{product.menu}</span>
      <span>{product.harga}</span>
    </div>
  })
</div>