如何修复“ ...不是函数”错误？

Question

我正在将状态设置器传递给一个孩子（从App到Nav），但是当我调用它时，我得到了TypeError：...不是一个函数。

我该如何解决？我该怎么办？

应用程序：

import React, { useState, useEffect } from 'react';
import './App.css';

/* Component imports */
import Nav from './components/nav/nav';
import Container from './components/container/container';

/*------------------*/

function App() {
  const [appState, setAppState] = useState("home");

    useEffect(() => {
      console.log(appState);
    }, [appState])

  return (  
    <div className="App">
      <Nav state={setAppState}/>
      <Container stateSetter={appState}/>
    </div>
  );
}

export default App;

导航：

import React, { useState, useEffect } from 'react';
import './nav.css';

/* Component imports */



/*------------------*/

function Nav(props) {
    return (
        <div>
            <div className="Nav" id="nav">
                <nav>
                    <ul>
                        <li><button><span>App</span></button></li>
                        <li><button onClick={() => props.stateSetter("home")}>Home</button></li>
                        <li><button onClick={() => props.stateSetter("products")}>Products</button></li>
                        <li><button onClick={() => props.stateSetter("about_us")}>About Us</button></li>
                        <li><button onClick={() => props.stateSetter("log_in")}>Log in</button></li> 
                    </ul>
                </nav>
            </div>
        </div>
    );
}

export default Nav;

容器：

import React, { useState, useEffect } from 'react';
import './conatiner.css';

/* Component imports */



/*------------------*/

function Container(props) {

    const [cont_appState] = useState(props.state);

    useEffect(() => {

    }, [cont_appState])

    return (
        <div>
            <div className="container">

            </div>
        </div>
    );
}

export default Container;

我刚刚开始工作这个项目，我也是新来的人，对此我的代码很混乱。

我要添加文本才能发布的内容是：Lorem ipsum dolor坐在amet处，私立下位了。 Aliquam placeat atsa ipsa eius facilis！公开竞猜建筑师！大麦田鼠在田间灭绝吗？

Answer 1

您有错字

代替

<Nav state={setAppState} />

应该是

<Nav stateSetter={setAppState} />

完整的组件在哪里

function App() {
  const [appState, setAppState] = useState("home");

    useEffect(() => {
      console.log(appState);
    }, [appState])

  return (  
    <div className="App">
      <Nav stateSetter={setAppState}/>
      <Container stateSetter={setAppState}/>
    </div>
  );
}