React 基本 api 调用问题

Question

我正在尝试将基本的 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;

Answer 1

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

所以

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

真的应该变成

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

Answer 2

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

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