reactjs - 如何在reactjs中的map函数内部进行映射

Question

我有我的表格 View 。并且我有正在完善显示的 posfields使用 map 函数。但我的问题是，当我尝试在 posfields map 函数中映射 td 时，它会抛出错误“'headers' of undefined”。

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

Answer 1

就像@Andrew已经建议的那样，您应该使用arrow函数以便能够在 map 中访问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>
    )
  })
}