React Native函数组件中state用于Axios请求时title始终undefined问题

问题出在你的searchBook函数参数定义和调用方式不匹配上！

你看，你定义searchBook的时候用了解构赋值：

const searchBook = ({title}) => { ... }

这表示这个函数期望接收一个包含title属性的对象，但你在按钮点击时的调用是：

<Button title="Search" onPress={() => searchBook(title)} />

直接把字符串类型的title state值传了进去，不是对象。函数内部解构{title}的时候，找不到对应的属性，自然就得到undefined了。

两种解决办法，选一种就行： #

办法一：修改调用方式，传对象 #

把调用改成传递包含title的对象，和函数的解构预期匹配：

<Button title="Search" onPress={() => searchBook({ title })} />

办法二：修改函数参数，去掉解构 #

直接让函数接收字符串类型的title参数，更贴合你当前的调用逻辑：

const searchBook = (title) => {
  let key = '&key=MYKEY';
  googlebooks
    .request({
      method: 'get',
      // 这里也可以用模板字符串让URL拼接更清晰
      url: `https://www.googleapis.com/books/v1/volumes?q=${title}${key}`,
    })
    .then(function(response) {
      console.log(response);
      setBookResults(response.data.items);
    })
    .catch(function(error) {
      console.log(error);
    });
};

另外补充个小建议：用模板字符串拼接URL比+号更不容易出错，也更易读，就像上面代码里那样。

你的state更新是正常的（console能打出正确的title），只要把参数传递的问题修复，请求就能正常带上title值啦！

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