如何在reactjs中映射函数内部

Question

我有我的表格视图。我有通过使用 map 函数来完善显示的 posfields。但我的问题是当我试图在 posfields map 函数中映射 td 时，它向我抛出错误“未定义的’headers’”。

 {
  this.POSFields.map(function (posFields, POSFieldsId) {
    return (
      <tr>
        <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId}
          {posFields.POSFields} </td>
    <td>
          <select className="selectpicker">
            <option value="">Select Value</option>
            {this.headers.map(function (headers) {
              return (
                <option key={headers}>{headers}</option>
              );
            })}
          </select>
        </td>
      </tr>
    )
  })
}

原文由 sowmyasree 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

就像@Andrew 已经建议的那样，您应该使用 arrow 函数以便能够在您的地图中访问 this 。您目前失去了 this 的上下文

{
  this.POSFields.map((posFields, POSFieldsId) => {
    return (
      <tr>
        <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId}
          {posFields.POSFields} </td>
    <td>
          <select className="selectpicker">
            <option value="">Select Value</option>
            {this.headers.map((headers) => {
              return (
                <option key={headers}>{headers}</option>
              );
            })}
          </select>
        </td>
      </tr>
    )
  })
}

原文由 Nocebo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

绑定映射函数以访问 this 上下文：

 {
  this.POSFields.map(function (posFields, POSFieldsId) {
    return (
      <tr>
        <td className="posheader" key={POSFieldsId} value={posFields.POSFieldsId}
          {posFields.POSFields} </td>
    <td>
          <select className="selectpicker">
            <option value="">Select Value</option>
            {this.headers.map(function (headers) {
              return (
                <option key={headers}>{headers}</option>
              );
            })}
          </select>
        </td>
      </tr>
    )
  }.bind(this))
}

或者箭头函数 this.POSFields.map((posFields, POSFieldsId) => {

原文由 Andrii Starusiev 发布，翻译遵循 CC BY-SA 3.0 许可协议