Javascript 如何从fetch API输出数组中获取不同的值

我正在尝试从API获取json数据，并将其值拆分并填充到React项目中。服务器API的代码如下所示：

const clone = require('clone')
const config = require('./config')

let db = {}

const defaultData = {
  categories: [
      {
        name: 'react',
        path: 'react'
      },
      {
        name: 'redux',
        path: 'redux'
      },
      {
        name: 'udacity',
        path: 'udacity'
      }
  ]
}

function getData (token) {
  //Each token has it's own copy of the DB. The token in this case is like an app id.
  let data = db[token]
  //This populates the default user data if there isn't any in the db.
  if (data == null) {
    data = db[token] = clone(defaultData)
  }
  return data
}

function getAll (token) {
  return new Promise((res) => {
    res(getData(token))
  })
}

module.exports = {
  getAll
}

import * as readableAPI from './readableAPI.js'

class App extends Component {

componentDidMount() {
  readableAPI.getCategories().then((category) => 
  category.map( value => console.log(value.name)))
}

...

}

并且，我正在尝试从上面的API获取数据，代码如下所示：

const clone = require('clone')
const config = require('./config')

let db = {}

const defaultData = {
  categories: [
      {
        name: 'react',
        path: 'react'
      },
      {
        name: 'redux',
        path: 'redux'
      },
      {
        name: 'udacity',
        path: 'udacity'
      }
  ]
}

function getData (token) {
  //Each token has it's own copy of the DB. The token in this case is like an app id.
  let data = db[token]
  //This populates the default user data if there isn't any in the db.
  if (data == null) {
    data = db[token] = clone(defaultData)
  }
  return data
}

function getAll (token) {
  return new Promise((res) => {
    res(getData(token))
  })
}

module.exports = {
  getAll
}

import * as readableAPI from './readableAPI.js'

class App extends Component {

componentDidMount() {
  readableAPI.getCategories().then((category) => 
  category.map( value => console.log(value.name)))
}

...

}

readableAPI.js

const url = "http://localhost:3001/"

let token = localStorage.token
if (!token)
  token = localStorage.token = Math.random().toString(46).substr(-8)

const headers = {
  'Accept': 'application/json',
  'Authorization': token
}

export const getCategories = () =>
fetch('http://localhost:3001/categories', {headers})
  .then(res => res.json())
  .then(data => console.log(data))

然后在我的React组件中，我尝试获得API的结果，如下所示：

const clone = require('clone')
const config = require('./config')

let db = {}

const defaultData = {
  categories: [
      {
        name: 'react',
        path: 'react'
      },
      {
        name: 'redux',
        path: 'redux'
      },
      {
        name: 'udacity',
        path: 'udacity'
      }
  ]
}

function getData (token) {
  //Each token has it's own copy of the DB. The token in this case is like an app id.
  let data = db[token]
  //This populates the default user data if there isn't any in the db.
  if (data == null) {
    data = db[token] = clone(defaultData)
  }
  return data
}

function getAll (token) {
  return new Promise((res) => {
    res(getData(token))
  })
}

module.exports = {
  getAll
}

import * as readableAPI from './readableAPI.js'

class App extends Component {

componentDidMount() {
  readableAPI.getCategories().then((category) => 
  category.map( value => console.log(value.name)))
}

...

}

现在我面临的问题是：在componentDidMount（）生命周期方法的上述代码中，我能够使用下面给出的代码获取json数据：

componentDidMount() {
    readableAPI.getCategories()
}

上述代码给出了3个类别的数组：

{categories: Array(3)}
   0: {name: "react", path: "react"}
   1: {name: "redux", path: "redux"}
   2: {name: "udacity", path: "udacity"}

但是，如果我尝试映射数组，并使用下面的代码获取单个值，则会得到未定义的输出

componentDidMount() {
      readableAPI.getCategories().then((category) => 
      category.map( value => console.log(value.name)))
    }

---

我想获取每个类别的值，以便使用服务器中可用的类别名称并将其显示在我的react组件中。我哪里出了问题。有人可以指导我解决此问题吗？

您没有从获取中返回任何内容：

fetch('http://localhost:3001/categories', {headers})
  .then(res => res.json())
  .then(data => console.log(data)) // you should return the data (or promise) here

以下是编写fetch（运行它）的方式：

var root='1〕https://jsonplaceholder.typicode.com';
常量getCategories=（）=>
获取（根+'/posts/1'{
方法：“获取”
})
.then（res=>res.json（））
.then（data=>console.log（'在fetch中-'，data））
getCategories（）。然后（（类别）=>{
log（'在fetch-'之外，类别）；
});
您没有从提取中返回任何内容：

fetch('http://localhost:3001/categories', {headers})
  .then(res => res.json())
  .then(data => console.log(data)) // you should return the data (or promise) here

以下是编写fetch（运行它）的方式：
var root='1〕https://jsonplaceholder.typicode.com';
常量getCategories=（）=>
获取（根+'/posts/1'{
方法：“获取”
})
.then（res=>res.json（））
.then（data=>console.log（'在fetch中-'，data））
getCategories（）。然后（（类别）=>{
log（'在fetch-'之外，类别）；
});
是否确实访问了从
getCategories
返回的对象？您的数组似乎位于
类别
键内：

componentDidMount() {
    readableAPI.getCategories().then(result => 
    result.categories.map( category => console.log(category.name)))
}

您确定正在正确访问从
getCategories
返回的对象吗？您的数组似乎位于
类别
键内：

componentDidMount() {
    readableAPI.getCategories().then(result => 
    result.categories.map( category => console.log(category.name)))
}

那么这是否意味着我的代码应该是这样的：fetch（“”，{headers}）。然后（res=>res.json（））。然后（data=>returndata）是的，在这种情况下可以省略
return
，只需
。然后（data=>data）
检查我对答案的编辑。我已经包括了一个正在运行的示例。我能够获得结果，但是我无法使用map函数从数组中获取不同的值。例如，仅从数组中获取类别的第一个名称。您能建议如何继续使用该名称吗。OMG，这很有效。非常感谢你的帮助。我已经为此苦苦挣扎了几个小时。我接受了你的答案。再次感谢：）那么这是否意味着我的代码应该是这样的：fetch（“”，{headers}）。然后（res=>res.json（））。然后（data=>returndata）是的，在这种情况下，你可以省略
return
，然后就
（数据=>数据）
检查我对答案的编辑。我已经包括了一个运行示例。我能够得到结果，但是我无法使用map函数从数组中获取不同的值。例如，仅从数组中获取类别的第一个名称。您能建议如何继续吗。天哪，这很有效。非常感谢您的帮助。我一直在努力我接受你的回答。再次非常感谢：）我不确定我是否用正确的方法来做。你能建议如何继续吗？在你调用
getCategories
后，尝试记录响应的值，以确保它是你所期望的。它看起来不像你说的那样只是一个数组，它是
类别
键中的一个数组。我不确定我是否使用了正确的方法。你能建议如何继续吗？在调用
getCategories
后，尝试记录响应的值，以确保它符合你的预期。它不像你说的那样只是一个数组，它是一个
categories
键中的数组。