javascript - react TypeError : x is not a function

我在子组件中从父函数调用了“booksRefresh()”函数，但出现错误:



我不知道为什么，因为'booksRefresh'是一个函数。有人可以帮我解释为什么会发生此错误吗？

这是我的代码:

import React, {useState} from "react";
import {Redirect} from "react-router";
import {addBook} from "../api/api";
import {Button} from "react-bootstrap";

const AddBookForm = (booksRefresh) => {
    const [title, setTitle] = useState();
    const [description, setDescription] = useState();
    const [submitted, setSubmitted] = useState(false);

    const postRequestHandler = () => {
        addBook(title, description);
        booksRefresh();
    }
...
 return (
        ...
            <Button type="submit" onClick={postRequestHandler} variant="outline-success">Add</Button>
        </div>
    )

上级:

function App({history}) {
  ...
    const [changeInBooks, setChangeInBooks] = useState(0)

    const booksRefresh = () => {
        let incrementChangeInBook = changeInBooks + 1;
        setChangeInBooks(incrementChangeInBook)
    }
return (
        <div className="App">
            <header className="App-header">
                ...
                            <Button variant="outline-success" onClick={() => history.push("/new-book")}>
                                {ADD_BOOK}</Button>
                ...
            </header>
            <Switch>
                ...
                <Route path="/new-book" exact render={() =>
                    <AddBookForm
                        booksRefresh={booksRefresh}/>
                }/>
               ...
            </Switch>
        </div>
    );
}

export default withRouter(App);

最佳答案

React函数组件接收到的参数是其 Prop ，这是一个为每个属性命名的对象。因此，您的AddBookForm的参数不应为booksRefresh，而应(按惯例)为props，然后通过props.booksRefresh()使用它:

const AddBookForm = (props) => {
// −−−−−−−−−−−−−−−−−−^^^^^
    const [title, setTitle] = useState();
    const [description, setDescription] = useState();
    const [submitted, setSubmitted] = useState(false);

    const postRequestHandler = () => {
        addBook(title, description);
        props.booksRefresh();
// −−−−−^^^^^^
    }

    // ...

或者，如果这是唯一的 Prop ，则可以使用解构as adiga shows:

const AddBookForm = ({booksRefresh}) => {

关于javascript - react TypeError : x is not a function，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59663809/