Javascript 获取API请求到我的React应用程序

我试图调用一个API来在React.js中显示我的网站上的信息，API需要一个令牌来读取，但我不知道生成令牌需要做什么，因为我的应用程序不需要任何注册或登录。它就像一个产品目录，你可以对它们进行个性化设置。我不太明白这一点，因为我是新来的，我正在自学，所以很抱歉，如果这让人困惑，请随意提问，我会尝试回答：）

以下是我目前掌握的代码：

export class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      models: [],
      isLoaded: false
    };
  }

  componentDidMount() {
    fetch(myUrlAPI)
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          models: json
        });
      });
  }

  render() {
    const { isLoaded, models } = this.state;

    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>
          <ul>{models.map(model => <li>{model.name}</li>)};</ul>

          <a href="/sofa">
            <div className="Parcelas">
              <img
                src="../../img/image-card-1@2x.png"
                className="ParcImage"
                alt="sofa"
              />
              <h1>Sofa hipnos</h1>
              <h2>
                1,200<span>€</span>
              </h2>
              <p className="Features">
                w 20.5 x 15.5 x h 19.5 (cm)<br />Pele
              </p>

              <button className="Botao">
                <p className="MostraDepois">See Details</p>
                <span>+</span>
              </button>
              <img
                src="../../img/points.svg"
                className="Decoration"
                alt="points"
              />
            </div>
          </a>
        </div>
      );
    }
  }
}

export类主要扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
型号：[]，
isLoaded:false
};
}
componentDidMount（）{
获取（myUrlAPI）
.then（res=>res.json（））
。然后（json=>{
这是我的国家({
isLoaded：是的，
模型：json
});
});
}
render（）{
const{isLoaded，models}=this.state；
如果（！已加载）{
返回装载。。。；
}否则{
返回(
{models.map（model=>
{model.name}
）}；
);
}
}
}

在

标记中，我只是试图测试来自json的结果

---

此外，每次我使用

.map

创建数组时，都会出现此错误（

类型错误：models.map不是函数）或类似错误，您能告诉我原因吗？
尝试这种方法，对于令牌，您需要与后端开发人员确认您应该如何发送以及发送什么

 let token = '1234567'; 
    fetch(myUrlAPI, {
      method: "GET",
      headers: {
        "authorization-key": token
      }
    }).then(res => res.json()
    ).then(function(json) {
      this.setState({
          isLoaded: true,
          models: json
        });
    }, function(error) {
      console.log(error)
    })

models
最初是您所在州的一个数组，因此我猜在获取完成时设置为
models
的
json
很可能不是数组。你能做
console.log（json）吗
在
设置状态之前，查看数据的外观？由于您尚未告诉我们您使用的API，因此很难帮助您阅读
需要令牌
。console.log（json）返回此消息：
{detail:“未提供身份验证凭据”。}
@tholleok。将数组设置为该值将不起作用。您可能希望在第一次
然后
回调中执行一些额外的逻辑，例如
然后（res=>{if（！response.ok）{throw Error（response.statusText）；}否则{return res.json（）；}}}）
并在承诺链的末尾添加
catch
，例如
catch（Error=>console.Error（Error））
返回相同的消息，而不返回其他消息…您使用的是什么API？