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

IT技术 reactjs
2021-05-17 17:37:15

我有我的表视图。我有使用 map 函数完善显示的 posfields。

{
  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>
    )
  })
}
4个回答

就像@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>
    )
  })
}

绑定映射函数以访问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) => {

我通常在函数内部使用一个函数来返回 map func

{
  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.getData()}
          </select>
        </td>
      </tr>
    )
  })
}

getData(){
return this.headers.map(function (headers) {
              return (
                <option key={headers}>{headers}</option>
              );
            }}

它与@Nocebo 的回答相同,但对按键进行了一些修正。它们应该在标签中而不是在下面的标签中。如果您打开浏览器控制台,您将看到有关它的警告:

{
  this.POSFields.map((posFields, POSFieldsId) => {
    return (
      <tr key={POSFieldsId}>
        <td className="posheader" 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>
    )
  })
}