将 JSON Restful API 数据格式化为 ReactJS Table答案

【问题标题】：Format JSON Restful API data into ReactJS Table将 JSON Restful API 数据格式化为 ReactJS Table
【发布时间】：2020-11-18 01:33:57
【问题描述】：

我对编程非常陌生。我正在尝试将 JSON Restful API 转换为 ReactJS 表。我得到的错误是“编译失败。语法错误”。我知道这是我的地图函数值，但我无法通过我的研究找到答案。如果有人可以让我知道我做错了什么，将不胜感激。

下面是我的代码。

import React, { useState, useEffect} from 'react';
import axios from 'axios'

const URL = 'https://rxnav.nlm.nih.gov/REST/interaction/interaction.json?rxcui=1092422'

const Table = () => {
  const [interactions, setInteractions] = useState([])

  useEffect(() => {
    getInteractions()
  }, [])

  const getInteractions = async () => {
    const response = await axios.get(URL)
    setInteractions(response.data)
  }

const renderHeader = () => {
  let headerElement = ['Name', 'Severity', 'Description', 'URL']

  return headerElement.map((key, index) => {
  return <th key={index}>{key.toUpperCase()}</th>
  })
}

const renderBody = () => {
  return interactions && interactions.map(({interactionTypeGroup[0].interactionType[0].minConceptItem.rxcui}) => {    
    return (      
      <tr key={rxcui}>
        <td>{interactionTypeGroup[0].interactionType[0].minConceptItem.rxcui}</td>
        <td>{interactionTypeGroup[0].interactionType[0].minConceptItem.name}</td>
        <td>{interactionTypeGroup[0].interactionType[0].minConceptItem.tty}</td>        
      </tr>
    )
  })
}

return(
  <>
  <h1 id='title'> Drug Interaction Table</h1>
  <table id='interaction'>
    <thread> 
      <tr>{renderHeader()}</tr>
    </thread>
      <tbody>
        {renderBody()}
      </tbody>    
  </table>
  </>
)
}

export default Table

【问题讨论】：

标签： javascript reactjs rest axios

【解决方案1】：

您的.您已经在 map 回调函数的参数中完成了对象解构，即：interactions.map.(({interactionTypeGroup[0].interactionType[0].minConceptItem.rxcui}))。但它应该在地图的回调函数中完成。因为，map 本身不接受对象解构作为参数。

所以，您的代码在renderBody() 函数中应该如下所示：

const renderBody = () => {
  return interactions && interactions.map((item, index) => {
    const {interactionTypeGroup[0].interactionType[0].minConceptItem} = item    
    return (      
      <tr key={item.rxcui}>
        <td>{item.rxcui}</td>
        <td>{item.name}</td>
        <td>{item.tty}</td>        
      </tr>
    )
  })
}

【讨论】：