React TypeError: booksRefresh不是函数问题求助及代码排查

嘿，这个问题很常见，我马上帮你理清原因！

错误根源 #

你在子组件AddBookForm里犯了一个典型的React props接收错误：

React组件的第一个参数永远是一个包含所有传入属性的props对象，而不是单个属性。

你现在写的是：

const AddBookForm = (booksRefresh) => { ... }

这里的booksRefresh其实是整个props对象，而不是父组件传递过来的同名函数。当你尝试调用booksRefresh()时，本质是在调用一个普通对象，自然会抛出“不是函数”的错误。

修复方案 #

有两种简单的修复方式，选一种你习惯的就行：

方式1：解构props（推荐）

直接在参数里解构出需要的booksRefresh函数：

const AddBookForm = ({ booksRefresh }) => {
  // 你的原有代码保持不变，postRequestHandler里的booksRefresh()调用正常工作
  const postRequestHandler = () => {
    addBook(title, description);
    booksRefresh();
  }
  // ...其余代码
}

方式2：通过props对象访问

保留完整的props参数，调用函数时加上props.前缀：

const AddBookForm = (props) => {
  const postRequestHandler = () => {
    addBook(title, description);
    props.booksRefresh(); // 这里加上props.前缀
  }
  // ...其余代码
}

额外提示 #

父组件传递函数的写法是完全正确的，问题只出在子组件接收props的环节。记住React组件的参数规则，以后就不会再踩这个坑啦！

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