如何与React一起显示从API请求的对象

Question

我试图用API中的每个类别显示不同的卡（名称，子类别...）。但是我看不到API中的值是什么。例如，我不知道ID是什么，或者类别名称是.title或.name怎么办，所以我无法显示它。

https://www.ifixit.com/api/2.0/categories

在API上，我可以看到类别的名称，但是看不到“ ID”，“ NAME”，“ KEY”……因此，当我尝试显示该名称时，我不知道如何访问该名称。

componentDidMount() {
axios.get('/categories')
    .then(res => {
      const categories = res.data; //How do I get the "ID" from here?
      this.setState({categories: categories});
      })
}

Answer 1

在控制台中将其塞住以查看可能的状态。

componentDidMount() {
axios.get('/categories')
    .then(res => {
      const categories = res.data; //How do I get the "ID" from here?
      console.log({res, categories}) // Try this!
      this.setState({categories: categories});
      })
}

Answer 2

您的CDM将存在于您的类中，因此您还将具有render（）方法：

AssetFileRecord fileRecord = projectFilesToScan[i];
Task.Run(() =>
{
    ScanProjectFileAsync(fileRecord);

    m_ScanningCurrentFileName = fileRecord.assetFilePath;

    int completedScans = m_ScanningTotalFiles - Interlocked.Decrement(ref m_RemainingFilesToScan);

    m_ScanningCurrentFileIndex = completedScans;
    m_ProgressPercentage = (float)completedScans / m_ScanningTotalFiles;
});

这将显示一个键列表及其数据中的值。

Answer 3

将res.data分配给状态后

axios.get('/categories')
      .then(res => { this.setState({ categories: res.data }) })
      .catch(err => { console.log(err) })

您可以console.log“ this.state.categories”并查看是否有任何ID /名称详细信息。

这取决于您的数据库。

编辑：

当我检查您的API时，没有id字段。因此，您无法访问ID。 但是；

this.state.categories.Apparel

将为您提供Apparel对象。 您可以在对象中使用唯一项作为键。

Answer 4

如果您尝试使用示例代码，例如：

componentDidMount() {
    const endpoint = 'https://www.ifixit.com/api/2.0/categories';

    fetch(endpoint).then(res => console.log(res.json()));
}

通过单击（F12）打开控制台，您将看到返回一个Promise，但ID对象不存在。