Gatsby/Axios问题：调用js-search时无法读取返回的JSON响应数据

我帮你梳理下代码里的几个关键问题，这就是导致bookList和bookk无法正确赋值的核心原因：

1. 错误直接赋值state变量，未使用React状态更新机制 #

你代码里写了bookk = result.data，但bookk是组件state里的属性啊！React的state不能直接这么赋值，必须用this.setState()来更新，不然数据根本存不到组件的状态里，后续你拿this.state.bookk看还是初始的空字符串。

正确的写法应该是：

this.setState({ bookk: result.data })

2. 注意JSON结构与state初始类型的匹配 #

你返回的JSON里，Studium是一个单个对象（{"studiumkode": "ABIOK", ...}），但你state里的bookList初始值是数组[]。这虽然不会直接导致赋值失败，但如果后续代码里你把bookList当数组用（比如遍历），肯定会出问题。如果Studium本来就是单个对象，那可以把bookList的初始值改成{}，或者后续处理的时候注意它是对象而非数组。

修正后的完整componentDidMount代码 #

我把代码改成了更清晰的async/await写法（既然你用了async修饰方法，就别混合then/catch啦），同时修复了状态更新的问题：

async componentDidMount() {
  try {
    const result = await Axios.get('http://localhost:8000/hentObjekterJSON/Studium');
    const bookData = result.data;
    // 正确更新两个state变量，同时结束加载状态
    this.setState({
      bookList: bookData.Studium,
      bookk: result.data,
      isLoading: false
    }, () => {
      // setState是异步的，把依赖最新state的方法放回调里更稳妥
      this.rebuildIndex();
    });
  } catch (err) {
    this.setState({ 
      isError: true,
      isLoading: false // 出错也要把加载状态关掉哦
    });
    console.log("====================================");
    console.log(`Something bad happened while fetching the data\n${err}`);
    console.log("====================================");
  }
}

额外小提醒 #

• 记得在请求完成（不管成功失败）后更新isLoading状态，不然页面会一直卡在加载状态。
• 如果rebuildIndex方法依赖bookList或bookk的最新值，一定要把它放在setState的回调函数里，因为setState是异步执行的，直接写在外面可能拿到的还是旧的state值。

内容的提问来源于stack exchange，提问作者Lars Vidar Amundsen Lien