Javascript 在React.js中的render return（）中显示获取结果

我的问题是如何在render return（）中显示数组结果。
我对API进行了一次提取，现在我得到了存储在数组中的结果。我需要显示这个结果，但我尝试在返回中使用for{}，但它不起作用，我还尝试了.map，并且

映射未定义

fetch(url + '/couch-model/?limit=10&offset=0', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
        }
    }).then(res => {
        if (res.ok) {
            return res.json();
        } else {
            throw Error(res.statusText);
        }
    }).then(json => {
        this.setState({
             models: json.results
        }, () => {
            /*console.log('modelosJSON: ', json);*/
        });
    })

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

    console.log('modelos: ', modelsArray);

    if (!isLoaded) {
        return (
            <div>Loading...</div>
        )
    } else {

        return (
            <div>
                /*show results here*/
            </div>
        )
   }
}

fetch（url+'/coach model/？limit=10&offset=0'{
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
'Authorization'：'JWT'+（JSON.parse（localStorage.getItem（'token'））.token）
}
})。然后（res=>{
如果（res.ok）{
返回res.json（）；
}否则{
抛出错误（res.statusText）；
}
})。然后（json=>{
这是我的国家({
模型：json.results
}, () => {
/*log（'modelosJSON:'，json）*/
});
})
render（）{
const{isLoaded}=this.state；
const modelsArray=this.state.models；
log（'modelos:'，modelsArray）；
如果（！已加载）{
返回(
加载。。。
)
}否则{
返回(
/*在此处显示结果*/
)
}
}

数组是这样的：
模型数组是从
获取
返回的json的
结果
，因此您可以在您的状态中将其设置为
模型
，并将
isLoaded
设置为
true
，这样加载模型时加载指示器将隐藏

示例

class App extends React.Component {
  state = { isLoaded: false, models: [] };

  componentDidMount() {
    fetch(url + "/couch-model/?limit=10&offset=0", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        Authorization: "JWT " + JSON.parse(localStorage.getItem("token")).token
      }
    })
      .then(res => {
        if (res.ok) {
          return res.json();
        } else {
          throw Error(res.statusText);
        }
      })
      .then(json => {
        this.setState({
          models: json.results,
          isLoaded: true
        });
      });
  }

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

    if (!isLoaded) {
      return <div>Loading...</div>;
    }

    return <div>{models.map(model => <div key={model.id}>{model.code}</div>)}</div>;
  }
}

类应用程序扩展了React.Component{
状态={isLoaded:false，模型：[]}；
componentDidMount（）{
获取（url+“/coach model/？limit=10&offset=0”{
方法：“获取”，
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”，
授权：“JWT”+JSON.parse（localStorage.getItem（“token”））.token
}
})
。然后（res=>{
如果（res.ok）{
返回res.json（）；
}否则{
抛出错误（res.statusText）；
}
})
。然后（json=>{
这是我的国家({
模型：json.results，
isLoaded：正确
});
});
}
render（）{
const{isLoaded，models}=this.state；
如果（！已加载）{
返回装载。。。；
}
返回{models.map（model=>{model.code}）}；
}
}
对代码有效，但当我访问品牌id和名称时，
{models.map（model=>{model.brand.name}）}
返回数组的相同位置。同一品牌重复10次name@SofiaRibeiro很难说没有看到你的品牌数据。不要将品牌标识用作
键
，因为这可能不是每个型号的唯一标识。改用模型id，它将是唯一的
key={model.id}
查看该图像，并感谢您对该键的建议@Tholle@SofiaRibeiro
model.brand.name
如果您想要品牌名称，它看起来是正确的。这可能是因为一些型号来自同一品牌。我不确定。我想我必须再做一次“为”来运行品牌阵列