React谷歌图书搜索应用报错排查：未挂载组件setState与print-type空值问题

嘿，我来帮你一步步捋清楚这些问题，搞定它们其实不难～

1. 先解决"Can't call setState on a component that is not yet mounted"警告 #

你在构造函数里直接调用this.setState()是踩了React的基础坑啦！构造函数是用来初始化state的地方，得直接给this.state赋值，而setState是组件挂载完成后用来更新状态的方法，组件还没挂载的时候调用它肯定会报错。

修正后的构造函数应该是这样：

constructor(props) {
  super(props);
  // 直接初始化state，不要用setState
  this.state = { 
    "print-type": "all", 
    filter: "ebooks" 
  };
  // 记得把所有用到this的方法都绑定！之前你只绑了handleSearch，另外两个也得绑
  this.handleSearch = this.handleSearch.bind(this);
  this.changeFilter = this.changeFilter.bind(this);
  this.changePrintType = this.changePrintType.bind(this);
}

2. 搞定"TypeError: Cannot read property 'print-type' of null"错误 #

这个错误主要有两个根源：

• 之前构造函数没正确初始化state，导致this.state可能处于未定义/null的状态
• 你的changeFilter和changePrintType里，错误地把e.target.value当成方法调用（加了括号()），但它其实是一个属性，直接取就行

修正这两个方法：

changeFilter(e) {
  // 去掉括号！value是属性不是方法
  const filter = e.target.value;
  this.setState({ filter });
}

changePrintType(e) {
  // 同样，直接用e.target.value
  const printType = e.target.value;
  this.setState({ "print-type": printType });
}

现在this.state["print-type"]就能正常访问到你初始化的状态值了，不会再报null的错误。

3. 补充：handleSearch的小优化 #

你现在的handleSearch只是拼了URL，还没发起实际请求，我给你补全一下，这样才能真正拿到图书数据：

handleSearch(q) {
  console.log(this.state);
  const key = "AIzaSyAJ448LHnJ0N6XxzOyIRfhJFveQzwHU_Ms";
  const baseurl = "https://www.googleapis.com/books/v1/volumes";
  // 注意把URL里的&换成&，不然API解析不了后面的参数
  const url = `${baseurl}?q=${encodeURIComponent(q)}&key=${key}&print-type=${this.state["print-type"]}&filter=${this.state.filter}`;
  
  fetch(url)
    .then(response => response.json())
    .then(data => {
      console.log("图书数据：", data);
      // 这里可以把拿到的数据存到state里，比如 this.setState({ books: data.items })
    })
    .catch(err => {
      console.error("请求出错啦：", err);
    });
}

这样修改之后，你的两个核心问题应该都能解决，也能正常发起图书搜索请求啦！

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