React Native类组件中使用Axios调用Open Library API实现数据请求的问题

1 先修复API配置的错误 #

你现有配置中baseURL存在拼写错误，同时建议使用HTTPS协议避免跨域或混合内容报错，修复后代码如下：

import axios from 'axios';
export default axios.create({
    baseURL: 'https://openlibrary.org/search.json'
})

2 类组件请求报错的核心原因 #

你现有类组件代码存在两个问题：

• 仅在componentDidMount内部定义了异步函数booksResponse，但没有调用这个函数，请求从未发起，自然没有输出
• 没有添加错误捕获逻辑，请求异常时会抛出未处理的异步错误

3 正确的类组件实现代码 #

useEffect空依赖数组的逻辑，完全等效于类组件的componentDidMount生命周期（仅在组件挂载完成后执行一次），直接把请求逻辑写在这个方法里即可，示例代码如下：

import React, { Component } from 'react';
import booksAPI from '../apis/books';

class BookList extends Component {
    
  constructor(props) {
    super(props)
    this.state = {
      books: []
    }
  }

  // 直接将componentDidMount声明为async函数即可使用await
  async componentDidMount(){
    try {
      const response = await booksAPI.get('?author=tolkien');
      console.log(response.data);
      // 将返回数据存入state供渲染使用
      this.setState({
        books: response.data.docs
      })
    } catch (error) {
      console.error('请求图书数据失败：', error)
    }
  }

  render() {
    // 示例渲染逻辑可根据需求调整
    return (
      <ul>
        {this.state.books.map(book => (
          <li key={book.key}>{book.title}</li>
        ))}
      </ul>
    )
  }
}

export default BookList;

4 useEffect逻辑到类组件的通用适配规则 #

• 空依赖数组的useEffect（仅挂载执行一次）：对应componentDidMount生命周期
• 带依赖项的useEffect（依赖变化时执行）：对应componentDidUpdate，需要在方法内对比前后props/state的变化，符合条件时再执行逻辑
• 带清理返回值的useEffect：对应componentWillUnmount，在该方法内执行取消请求、清除定时器等清理操作

内容的提问来源于stack exchange，提问作者user16861088