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

因此，当选择了图像按钮时，它将触发onBrigadePosSelection函数，该函数会将选定的按钮返回到网格的容器，然后单击该函数。

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)

React Prop在重新渲染时变得不确定

1 个答案: