Javascript ReactJS-TypeError:setPage不是函数

我是ReactJS的初学者。刚完成关于React和Redux基础知识的课程。我开始了一门新的课程，题为“反应数据可视化-构建加密货币仪表盘”

我在第12课面临一个问题。当我在Visual Studio code上的Git Bash终端上运行

Thread start

时，我会看到以下页面：

当我单击仪表板时，出现以下错误：

TypeError: setPage is not a function
onClick
C:/Users/Shawn/Desktop/cryptodash/cryptodash/src/App/AppBar.js:31
  28 | {({page, setPage}) => (
  29 | <ControlButtonElem 
  30 |     active={page === name}
> 31 |     onClick={()=>setPage(name)}
     | ^  32 | > 
  33 |     {toProperCase(name)}
  34 | </ControlButtonElem>

以下是我在

AppProvider.js

文件夹下的代码：

import React from 'react';
import styled, {css} from 'styled-components';
import {AppContext} from './AppProvider';

const Logo = styled.div`
    font-size: 1.5em;
`

const Bar = styled.div`
    display: grid;
    grid-template-columns: 180px auto 100px 100px;
    margin-bottom: 40px;
`
const ControlButtonElem = styled.div`
    cursor: pointer;
    ${props => props.active && css`
        text-shadow: 0px 0px 60px #03ff03;
    `}
`

function toProperCase(lower){
    return lower.charAt(0).toUpperCase() + lower.substr(1)
}

function ControlButton({name}){
    return(
        <AppContext.Consumer>
            {({page, setPage}) => (
            <ControlButtonElem 
                active={page === name}
                onClick={()=>setPage(name)}
            > 
                {toProperCase(name)}
            </ControlButtonElem>
            )}
        </AppContext.Consumer>
    ) 
}

export default function(){
    return (
    <Bar>
        <Logo>Cryptodash</Logo>
        <div/>
        <ControlButton active name="dashboard" />
        <ControlButton name="settings" />
    </Bar>
    )
}

import React from 'react';

export const AppContext = React.createContext();

export class AppProvider extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            page: 'settings',
            setpage: this.setPage
        }
    }
    setPage = page => this.setState({page});
    render(){
        return(
            <AppContext.Provider value={this.state}>
                {this.props.children}
            </AppContext.Provider>
        )
    }
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.

如何解决此问题？

此处输入错误

setpage: this.setPage

我想应该是这样

setPage: this.setPage

更新：您可以尝试将提供商更改为这样吗。（并删除状态变量setPage和其他定义行）

this.setState（{page}）
}}>
{this.props.children}

谢谢你抓住了打字错误。然而，在修复它之后，我仍然得到相同的错误。@Shawn，怀疑状态变量没有正确携带。你能提供最新的答案吗？我已经添加了你的代码并注释掉了状态变量。但仍然如此。我也犯了同样的错误。在修正了打字错误后，问题没有得到解决。因此，我在

<AppContext.Provider value={{
       page: this.state.page, 
       setPage: page => this.setState({page})
 }}>
   {this.props.children}
</AppContext.Provider>