时间戳

首页 > 解决方案 > 无法访问 FETCH 响应数据

javascript - 无法访问 FETCH 响应数据

问题描述

我为个人 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"
    }
]

标签： javascript

解决方案

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

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

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

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

推荐阅读