无法访问 FETCH 响应数据答案

【问题标题】：Unable to access FETCH response data无法访问 FETCH 响应数据
【发布时间】：2021-11-04 19:03:25
【问题描述】：

我为个人 api 创建了一个端点（在代码中被隐藏），它运行良好，我可以正确获取并且我在 console.log 中获取数组

问题是我无法访问数据来填充表格，我不知道出了什么问题。

我的代码：

export default class lastExtensions extends Page {

  oninit(vnode){
    super.oninit(vnode)
    this.loading = true
  }

  oncreate(vnode) {
    super.oncreate(vnode);
    app.setTitle(app.translator.trans('justoverclock-extiverse-ext-api.forum.pagetitle'));
    app.setTitleCount(0);

    const settings = {
      "async": true,
      "crossDomain": true,
      "url": "url",
      "method": "GET",
      "headers": {
        "header1": "header1",
        "header1-key": "000000000000000000000jsn213b8019cc43"
      }
    };

    $.ajax(settings).done(function (response) {
      this.ext = response.slice(0,14);
      console.log(this.ext)
      this.loading = false;
      m.redraw();
    })
  }

  view() {
   
    return (
      <div className="lastExtPage">
        {IndexPage.prototype.hero()}
        <div className="container">
          <div className="sideNavContainer">
            <nav className="nav IndexPage-nav sideNav">
              <ul>{listItems(IndexPage.prototype.sidebarItems().toArray())}</ul>
            </nav>
            <div className="content sideNavOffset">
              <h1 className="lastExtTitle">
                {app.translator.trans('justoverclock-extiverse-ext-api.forum.pageTitle')}
              </h1>
              <p className="pagedescription">{app.translator.trans('justoverclock-extiverse-ext-api.forum.pageText')}</p>
              <div className="containerExtensions" id="extList">
                {this.ext.map((ext) =>{   // HERE THE PROBLEM
                  {console.log(ext)}
                  return (
                    <tr class="listaEst">
                      <td class="tdone">{I WANT DATA HERE}</td>
                      <td class="tdtwo">{I WANT DATA HERE}</td>
                      <td class="tdthree">{I WANT DATA HERE}</td>
                    </tr>
                  )
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

我不明白为什么我不能映射和访问我的 fetch 响应来填充表格...我做错了什么？

this.ext 控制台日志是：

[
    {
        "name": " aaaaaa ",
        "desc": "bbbbbbbbb.",
        "totalDownload": " 0 downloads ",
        "image": "https://aaa.png",
        "url": "https://aaa.png"
    },
{
        "name": " aaaaaa ",
        "desc": "bbbbbbbbb.",
        "totalDownload": " 0 downloads ",
        "image": "https://aaa.png",
        "url": "https://aaa.png"
    },
{
        "name": " aaaaaa ",
        "desc": "bbbbbbbbb.",
        "totalDownload": " 0 downloads ",
        "image": "https://aaa.png",
        "url": "https://aaa.png"
    }
]

【问题讨论】：

能否请您控制台 this.ext 并将结果也附在正文中
this 将是 jquery 的 ajax 对象
完成，添加控制台日志

标签： javascript

【解决方案1】：

使用箭头函数，让'this'在外部范围内引用'this'。

$.ajax(settings).done((response) => {
    this.ext = response.slice(0,14);
    console.log(this.ext)
    this.loading = false;
    m.redraw();
})

要解决其他问题，请初始化数据

oninit(vnode){
  super.oninit(vnode);
  this.loading = true;
  this.ext = [];
}

【讨论】：

当我稍后调用地图时，我无法读取未定义的属性（读取“地图”）
谢谢！我终于可以访问所有 :)

【解决方案2】：

我会尝试类似这个例子的东西，这样你就知道你引用了正确的this：

oninit(vnode){
    ...
    this.ext = null;
}

setExt = (data) => {
    this.ext = data;
}

$.ajax(settings).done(function (response) {
    setExt(response.slice(0,14));
      ...
})

【讨论】：

@Jkarttunen 的回答我觉得更好