如何在 React 网络应用程序上显示地图中的值 (javascript)

Question

我是 JavaScript 的新手。我有一张地图，我在其中为每个键存储了 3 个值。地图的大小是可变的，每次在应用程序上发布新项目时都会添加一个新的 key:values 对。

我想在网页上显示地图的当前内容（最好是 table 格式，但现在我只想在担心之前看到它们打印在那里）。我的所有搜索都被谈论 google 地图的人所阻碍。

我找到了在使用数组时解决此问题的方法，但我喜欢地图的结构。

我初始化一个空地图：

const productMap = new Map();

站点中添加了新项目并展开了地图：

    handleSubmit = async () => {
    const { cost, itemName, quantity } = this.state;

    let result = await this.ItemManager.methods.createItem(itemName, cost, quantity).send({ from: this.accounts[0] });
    const index = result.events.ProductStep.returnValues._productIndex;

    productMap.set(index, {itemName: itemName, cost: cost, quantity: quantity}); **// This is where map values are added. 1 key (index) has 3 values (itemName, cost and quantity)**

    console.log(productMap)
    
    alert("Send "+cost+" Wei to "+result.events.ProductStep.returnValues._address);
  };

这个函数完全按照我想要的方式打印到控制台，但我不确定如何将它放入 JSX（我认为这是正确的术语？）部分。

    printValues = () => {
    for(let [key, value] of productMap){
      console.log(value.itemName +':'+ value.cost +':'+ value.quantity) **//This logs 'Item Name' : 'cost' : 'quantity' in a separate row for each key- this is what I ideally want but displayed on the web page**

      return(
        <div>{value.itemName} {value.cost} {value.quantity}</div>
        )
    }
   }

我尝试了很多变体来让它显示在网页上，但到目前为止没有任何效果。

 return (
      <div className="App">
        <header className='App-header' ><img className='App-logo' src={mylogo} alt="logo"/></header>
        <h1>Simply Payment/Supply Chain Example!</h1>
        <h2>Products for sale:</h2>

        {this.printValues} **//I imagine it being something along these lines where the
 //function produces the desired values and they are displayed on the web page.**

感谢您的帮助！

Answer 1

您可以在 JSX 上迭代相同的映射并像在 console.log 上那样打印您的值。因为它是一个 for 循环，所以你必须将项目存储在某个变量中并在 JSX 中使用它们。您可以像这样更新 printValues() 方法。

printValues = () => {
  let el = [];
  for (let [key, value] of productMap) {
    console.log(value.itemName + ":" + value.cost + ":" + value.quantity); //This logs 'Item Name' : 'cost' : 'quantity' in a separate row for each key- this is what I ideally want but displayed on the web page**
    el.push(value.itemName + ":" + value.cost + ":" + value.quantity);
  }
  return <div>{el}</div>;
};

我通过使用地图和我使用状态对象数组的方式附加了沙箱。你可以看看。

如何在 React 网络应用程序上显示地图中的值 (javascript)

How to display the values from a map on a react web app (javascript)

javascript

mapping

jsx

reactjs