为什么当我在 reactjs 中尝试 运行 这段代码时，它总是输出错误的总数

Question

我还是 reactjs 的新手，我尝试构建一些项目。这个项目显示任何产品价格和库存，但这里有这个问题。

我尝试对这个数字求和以获得我在 reactjs 中的产品的总价，但输出总是这样。如何解决这个问题...

import React from "react";
import { nanoid } from "nanoid";
import calc from "./calc";

export default class TableData extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let arr = []
    const {
      data,
    } = this.props;
    
    const {
      location, proformaItem,
    } = data;

    proformaItem.forEach((item) => {
      const parseStock = JSON.parse(item.product_stock);
      parseStock.forEach((stock) => {
        let total = 0
        if (stock[1] !== undefined) {
          total += Number(stock[1]);
        }
        if (stock[5] !== undefined) {
          total += Number(stock[5])
        }

        arr.push(total);
      })
    })

    console.log(arr);

    return (
      <>
        {
          proformaItem.map((item, index) => {
            const parseStock = JSON.parse(item.product_stock);
            const parseItem = JSON.parse(item.items);

            return (
              <tr key={nanoid(12)}>
                <td key={nanoid(12)}>{parseStock.map((key) => key[1])}</td>
                <td key={nanoid(12)}>{parseStock.map((key) => key[3])}</td>
                <td key={nanoid(12)}>{parseStock.map((key) => key[5])}</td>
                <td key={nanoid(12)}>{item.categoryDescription}</td>
                <td key={nanoid(12)}>{item.productDescription}</td>
                <td key={nanoid(12)}>{
                  parseStock.map((item) => {
                    if (item[1] !== undefined && item[5] !== undefined) {
                      console.log(calc(item[1], item[5]));
                    }
                  })
                }
                </td>
                <td key={nanoid(12)}>1</td>
                <td key={nanoid(12)}>{parseItem.map((key) => key['qty'])}</td>
              </tr>
            )
          })
        }
      </>
    )
  }
}

这是我在 json 中的数据

{
    "proformaItem": [
        {
            "product_id": "1852",
            "productDescription": "Charcoal Size M",
            "categoryDescription": "7200 Premium Tee",
            "product_stock": "[{\"1\": 272}, {\"3\": 5328}, {\"5\": 177}]",
            "items": "[{\"qty\": 1, \"productId\": 1852, \"proformaInfoId\": 556745, \"proformaItemId\": 2679283}]"
        },
        {
            "product_id": "1801",
            "productDescription": "Black Size S",
            "categoryDescription": "7200 Premium Tee",
            "product_stock": "[{\"1\": 745}, {\"3\": 30744}, {\"5\": 273}]",
            "items": "[{\"qty\": 1, \"productId\": 1801, \"proformaInfoId\": 556745, \"proformaItemId\": 2679284}]"
        },
    ]
}

enter image description here

Answer 1

问题是您在渲染方法中更改了 arr 数组，这意味着它会在每次组件渲染时推送，这就是您得到不稳定结果的原因。为避免这种情况，您可以移动此逻辑

proformaItem.forEach((item) => {
      const parseStock = JSON.parse(item.product_stock);
      parseStock.forEach((stock) => {
        let total = 0
        if (stock[1] !== undefined) {
          total += Number(stock[1]);
        }
        if (stock[5] !== undefined) {
          total += Number(stock[5])
        }

        arr.push(total);
      })
    })

以componentDidMount()回调为例。

另外你不应该使用key={nanoid(12)}，因为它在每次渲染时都会创建新的密钥，但密钥应该是强大和稳定的。最好用你的产品吧：key={item.product_id}

UPD：如果你只想总结你的总数，你根本不需要使用 arr，你可以只使用 total:

let total = 0
proformaItem.forEach((item) => {
      const parseStock = JSON.parse(item.product_stock);
      parseStock.forEach((stock) => {
        if (stock[1] !== undefined) {
          total += Number(stock[1]);
        }
        if (stock[5] !== undefined) {
          total += Number(stock[5])
        }
      })
    })

console.log(total)