reactjs - 如何防止函数在 render() 循环中重新渲染

问题描述

我有.map()内部包含render()呈现许多img-es的代码。图像本身具有src带有图像信息的道具 - 这是从函数中获取的。为了获取我在this.getImage(barcode)内部使用的这些信息.map.，不幸的是，它总是会重新渲染。没有“条形码”图像无法绘制。

我用功能和图像在里面创建了新组件.map()，但结果是一样的。顺便说一句，我认为使用代码会更清楚：

内部渲染（）：

        {details.map((detail, idx) => (
                    <tr key={idx}>
                      <td>{detail.code}</td>
                      <td>
                        {selectedPrintType.value === "2" && (
                          <Fragment>
                            {this.getBarcode(detail.code)}
                              <div>
                                <img
                                  src={imgSrc}
                                  id="myimg"
                                  alt=""
                                  style={{
                                    padding: "10px",
                                    width: OS === "Linux" ? "270px" : "auto",
                                  }}
                                />
                              </div>
                          </Fragment>
                        )}
                      </td>
        ))}

函数获取条形码（）：

    getBarcode = barcode => {
    let { imgSrc } = this.state;
    let OS = "Win";
    Axios.get("/api/barcode", { params: { barcode, OS } })
      .then(res => res.data)
      .then(png => {
        imgSrc = "data:image/png;base64," + png.toString("base64");
        this.setState({ imgSrc });
      })
      .catch(err => {
        console.log(err);
      });
  };

预期的输出是每个条码只有一个渲染。

标签： reactjs

reactjs - 如何防止函数在 render() 循环中重新渲染

问题描述

解决方案

推荐阅读