如何在反应打字稿中循环遍历数组？答案

【问题标题】：How to loop through an array in react typescript?如何在反应打字稿中循环遍历数组？
【发布时间】：2021-09-22 18:56:20
【问题描述】：

如何循环遍历数组来显示值？

这是我的以下代码：

  ineligiblePointsTableRows() {
    return this.state[PointsTableType.INELIGIBLE].contracts.map(contract => {
      return {
          applied: (<input
              value={0}
              disabled
              className="applied-pts-input"
          />),
          reason: (
            <div className="ineligible-reason-container">
              <i className="fa fa-exclamation-triangle"></i>
              <p aria-label={contract.reason}>{contract.reason.map((reason: any, i: any) => (
                <text>Hello world</text>
              ))}</p>
            </div>
          ),
        },
      };
    });
  }

我在contract.reason.map 行遇到错误

对象可能是“未定义”.ts(2532)（参数）合约： ContractUsage 没有可用的快速修复方法

当我console.log(contract.reaons)这是价值：

Array(2)
0: "Cannot borrow usage this far in the future."
1: "Contract has a past due balance."

所以我的目标是我试图遍历contract.reason，但我遇到了上面的错误。我该如何解决这个问题？

【问题讨论】：

您的错误表明contract 可以未定义。您是否尝试向其添加未定义的检查？ contract?.reason.map 的 if(contract !== undefined)contract.reason.map...

标签： javascript reactjs typescript react-typescript

【解决方案1】：

这是一个打字稿错误，告诉您该对象可能是“未定义的”，或者换句话说，可能是空的任何值。

解决这个问题的几种可能方法：

ineligiblePointsTableRows() {
    return this.state[PointsTableType.INELIGIBLE].contracts.map(contract => {
      return {
          applied: (<input
              value={0}
              disabled
              className="applied-pts-input"
          />),
          reason: (
            <div className="ineligible-reason-container">
              <i className="fa fa-exclamation-triangle"></i>
              <p aria-label={contract?.reason}>{contract?.reason?.map((reason: any, i: any) => (
                <text>Hello world</text>
              ))}</p>
            </div>
          ),
        },
      };
    });
  }

ineligiblePointsTableRows() {
    return this.state[PointsTableType.INELIGIBLE].contracts.map(contract => {
      return {
          applied: (<input
              value={0}
              disabled
              className="applied-pts-input"
          />),
          reason: (
            <div className="ineligible-reason-container">
              <i className="fa fa-exclamation-triangle"></i>
              {contract !== undefined && <p aria-label={contract.reason}>{contract.reason.map((reason: any, i: any) => (
                <text>Hello world</text>
              ))}</p>}
            </div>
          ),
        },
      };
    });
  }

【讨论】：

在合同和原因的问号之后，如contract?.reason?.map...我收到错误Property 'map' does not exist on type 'string'.ts(2339)
正如错误所说，这意味着reason 是字符串类型。你能分享一下这个州的样子吗？

【解决方案2】：

这意味着您的contract 或contract.reason 可能未定义。为避免错误，请像这样使用optional chaining：

contract?.reason?.map

【讨论】：

在合同和类似合同的原因之后加上问号？.reason?.map...我收到错误“字符串”类型上不存在属性“地图”.ts(2339)
表示reason其实是一个字符串。
检查reason属性的类型