Question

我有我的桌子视图。我有完善显示的posfields 使用地图功能。但我的问题是，当我试图在posfields地图功能中映射td时，它向我扔了错误＆＃34;＆＃39;标题＆＃39;未定义＆＃34;。

{
  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函数才能访问地图中的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>
    )
  })
}

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

Answer 3

我通常使用函数内部的函数来返回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>
              );
            }}

Answer 4

它与@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>
    )
  })
}

如何映射reactjs

4 个答案: