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

【问题标题】：How to fix "... is not a function" error?如何修复“...不是函数”错误？
【发布时间】：2019-12-25 17:33:24
【问题描述】：

我正在将一个状态设置器传递给一个孩子（从 App 到 Nav），但是当我调用它时，我得到了 TypeError: ... is not a function。

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

应用：

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 sit amet，consectetur adipisicing elit。 Aliquam placeat atque ipsa eius facilis！ Quidem ad officia architecto molestias！ Autem molestias molestiae deserunt tempore maxime delectus commodi cum blanditiis Inventore?

【问题讨论】：

什么不是函数？您遗漏了错误消息的重要部分。
你的代码工作得很好，你能回答@SpencerWieczorek的问题吗

标签： javascript reactjs react-hooks

【解决方案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>
  );
}

【讨论】：

感谢您的耐心等待！ :)