Question

我有一个for循环，需要根据一些逻辑来渲染div：

let allRecords;

    if (this.state.allRecords) {
      allRecords = (() => {
        let paramOne = this.state.paramOne;
        let paramTwo = this.state.paramTwo;
        let paramThree = this.state.paramThree;
        let paramFour = this.state.paramFour;
        let paramFive = this.state.paramFive;
        let paramSix = this.state.paramSix;

        for (let i = 0; i < this.state.length; i++) {
          let res;

          res = (
            <div>
              <div className="event-result-table-container">
                <div className="result-cell">{paramOne[i]}</div>
                <div className="result-cell">
                  <span>{paramTwo[i] ? "Win" : "Lose"}</span>
                </div>
                <div className="result-cell">{paramThree[i]}</div>
                <div className="result-cell">{paramFour[i]}</div>
                <div className="result-cell">{paramFive[i]}</div>
                <div className="result-cell-last">{paramSix[i]}</div>
              </div>
            </div>
          );
          return res;
        }
      })();
    }

六个param数组都具有相似的结构。例如，我从Chrome控制台复制了paramSix状态数组，它看起来像这样：

预期结果：：我想看到一堆res块的渲染（等于this.state.length），每个块的正确值都取自状态数组。

观察到的结果：仅渲染一行块，但是所有值都存在（通过React DevTools检查），就好像它仅渲染div s的一块，但是将所有值放在其单元格中，而不是将它们放在单独的块中。

我在这里做什么错了？

Answer 1

第一次在函数中调用return时，它将停止执行并返回该值。您是在for循环中调用它的，但这没关系，因为for循环不是那样工作的，它们不是函数。因此循环不会运行超过一次。

您遇到的另一个问题是，您的数据（如您向我们展示的paramSix是一个包含数据数组的数组，因此，当您在第一个（且仅限于）中引用paramSix[i]时）执行循环，您引用的是数组，而不是数字。相反，您可能想要paramSix[0][i]。

这里是一种重写它的方法，以便创建一个元素数组。请注意，我使用object destructuring简化了从状态获取参数的过程，并使用const，因为此处不应更改这些值：

let allRecords = [];

if (this.state.allRecords) {
  const {
    paramOne,
    paramTwo,
    paramThree,
    paramFour,
    paramFive,
    paramSix
  } = this.state;

  for (let i = 0; i < this.state.length; i++) {
    allRecords.push(
      <div>
        <div className="event-result-table-container">
          <div className="result-cell">{paramOne[0][i]}</div>
          <div className="result-cell">
            <span>{paramTwo[0][i] ? "Win" : "Lose"}</span>
          </div>
          <div className="result-cell">{paramThree[0][i]}</div>
          <div className="result-cell">{paramFour[0][i]}</div>
          <div className="result-cell">{paramFive[0][i]}</div>
          <div className="result-cell-last">{paramSix[0][i]}</div>
        </div>
      </div>
    );
  }
}

对于Loop在React中未显示正确的结果

1 个答案: