Question

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

我在.map()内用函数和图像创建了新组件，但结果相同。 Bthw，我想代码会更清楚：

内部render（）：

        {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（）：

    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);
      });
  };

每个条形码的预期输出只有一个。

Answer 1

您的render方法应该是“纯”的，没有副作用。当前，每个渲染器都在调用getBarcode，这会踢一个请求，该请求会更新组件状态，从而触发重新渲染。您可以将getBarcode调用移到componentDidMount以便仅在安装时调用一次吗？

render（）函数应该是纯函数，这意味着它不会修改组件状态，每次调用时都返回相同的结果，并且不与浏览器直接交互。

React Docs

Answer 2

无论如何，您都必须从渲染函数中删除setState。为此，请按照以下步骤操作创建一个新函数并在componentDidMount中调用

window.location

定义功能

componentDidMount() {
    //....other stuffs
    this.getOutput();
}

内部渲染只需使用

getOutput = () => {
  let output = [];

  output.push(
    details.map((detail, idx) => (
      return 
      (<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>
      </tr>
      )
    ))
  )

  this.setState({
    outputData: output
  })
}

，并保持render() { <div> //....other stuffs {this.state.outputData} </div> }不变。

希望这会起作用。

Answer 3

一旦看到图片src，即可以看到您正在设置状态，即this.setState（{imgSrc}）;

那么您是否不能使用shouldComponentUpdate（nextProps，nextState）{}来确定组件渲染生命周期是否应该继续？

如何防止在render（）循环中重新呈现函数

3 个答案: