React 基本 api 调用问题

Posted 2023-02-22

【中文标题】React 基本 api 调用问题

【英文标题】：React basic api call issue

【发布时间】：2020-12-25 08:18:54

【问题描述】：

我正在尝试将基本的 react js api 数据显示到 DOM。

我收到此错误：

在控制台上我没有收到任何错误，但它给出了 TypeError: Cannot read property 'map' of undefine error on the page。

class App extends React.Component 
  constructor(props)
  
    super(props);
    this.state = 
     details: [],
     isLoaded: false
    
   
  
  
  componentDidMount()
  
    fetch("https://dummy.restapiexample.com/api/v1/employees")
    .then(res => res.json())
    .then(
      (result) => 
        this.setState(
          isLoaded: true,
          details: result.details
        )
      
    )
  

 
  render() 
    const  isLoaded, details = this.state;

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

    return (
    <ul>
      details.map(detail => (
        <li key=detail.employee_name> detail.employee_name </li>
      ))
    </ul>
    );
  
  


export default App;

【问题讨论】：

details && details.map 假设 details 确实是一个数组

【参考方案1】：

您使用的端点返回data，而不是details。

所以

this.setState(
      isLoaded: true,
      details: result.details
    )

真的应该变成

this.setState(
      isLoaded: true,
      details: result.data
    )

【讨论】：

非常感谢，它修复了我的错误，但为什么它应该是数据而不是细节？或者是其他东西？数据是 fetch 调用的预定义结果集吗？

不，这只是从该特定 API 返回的 JSON 的结构。

【参考方案2】：

如果您设置为详细信息的响应是一个数组，您的代码应该可以正常工作。在您尝试从中获取的获取 url 中，响应没有任何详细信息字段。将其更改为result.data，它应该可以正常工作。

还可以尝试将details.map(...) 更改为details && details.map(....) 如果您由于延迟将result.data 设置为提取的详细信息而得到它，这应该可以解决错误。此更改还将确保如果 details 未定义（因为它当前在您的代码中），那么 map 函数将永远不会执行并且您不会被抛出错误。

【讨论】：

为什么应该是数据而不是细节？或者是其他东西？数据是 fetch 调用的预定义结果集吗？

@Rohan 只需在浏览器上输入 url - dummy.restapiexample.com/api/v1/employees 并检查您获得的响应对象。在该对象中，仅存在数据作为响应对象的键，没有详细信息，因此...