javascript - React Prop 在重新渲染时变得未定义

Question

所以我目前正在学习 react.js，我遇到了一个我无法解决的问题。

总的来说，我有一个用于渲染图像网格的容器。如果您选择其中一张图片，您将能够从选项列表中将其更改为另一张图片。

这是目前渲染良好的 Grid 容器的潜在相关部分。如果上下文中的完整代码有帮助，您可以在这里找到它:https://codepen.io/KrisSM/pen/wvvmoqg

 _onBrigadePosSelection = slot => {
    console.log("This was the division selected in Brigade Grid: " + slot);
    this.props.onBrigadePosSelected(slot);
  };

  render() {
 for (let i = 0; i < 15; i++) {
      //each block is a separated so that they can be rendered as different rows in the return
      if (i <= 4) {
        rowOne.push(
          <div key={i}>
            <ImageButton
              btnType={"Grid"}
              imageSrc={this.props.icons[this.props.brigadeDesign[i]]}
              clicked={() => this._onBrigadePosSelection(i)}
            />
          </div>
        );
      }

      if (i > 4 && i <= 9) {
        rowTwo.push(
          <div key={i}>
            <ImageButton
              btnType={"Grid"}
              imageSrc={this.props.icons[this.props.brigadeDesign[i]]}
              clicked={() => this._onBrigadePosSelection(i)}
            />
          </div>
        );
      }

      if (i > 9 && i <= 14) {
        rowThree.push(
          <div key={i}>
            <ImageButton
              btnType={"Grid"}
              imageSrc={this.props.icons[this.props.brigadeDesign[i]]}
              clicked={() => this._onBrigadePosSelection(i)}
            />
          </div>
        );
      }
    }

So, when an image button is selected, it fires the onBrigadePosSelection function, which returns the selected button to the container for the grid where this function is then hit.

onBrigadePosSelected = slot => {
    this.setState({ selectedDivision: slot });
    console.log("This is the selected division: " + slot);
  };

到目前为止，一切正常。网格呈现，当按下按钮时，此控制台日志会正确说明按下了哪个按钮。但这就是事情开始变得奇怪的地方。当状态改变时，他们当然是重新渲染，但是在重新渲染之后，selectedDivision 变得不确定。

Answer 1

查看您的代码，我认为问题出在以下几行:

clicked={() => this._onBrigadePosSelection(i)}

原因是i每次迭代都会不断变化，但是 () => this._onBrigadePosSelection(i)是动态调用的函数。

这意味着无论何时点击按钮，它都会得到最新的值i。 (或垃圾或 undefined )因为 i已经收集了垃圾。

我建议您传递函数 this._onBridgePosSelection作为props并在 <ImageButton /> 中调用它组件代替。

<ImageButton
              btnType={"Grid"}
              imageSrc={this.props.icons[this.props.brigadeDesign[i]]}
              index={i}
              onBrigadePosSelection={this._onBrigadePosSelection}
            />

然后里面<ImageButton />组件，你可以这样调用它:

this.props.onBrigadePosSelection(this.props.index)