如何解決“…不是函數”錯誤？

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處，consectetur adipisicing精英。 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>
  );
}