Javascript ReactJs上下文-如何用传入的状态替换当前组件状态

我正试图了解ReactJs上下文，并最终在显示州名称和countNumber方面取得了一些进展

但是，我仍在努力解决如何替换formatCount（）函数中使用的当前状态

在下面的例子中，有人能告诉我你是如何做到这一点的吗

我想在我的上下文中使用数字，例如在方法中使用5，formatCount（），因此它类似于

    formatCount() {
        const currentCount = {c.state.currentCount};
        return currentCount === 0 ? "Zero" : currentCount;
    }

这是我的背景

import React, { Component } from "react";
export const CounterContext = React.createContext();

export default class CounterProvider extends Component {
    state = {
        state: { name: 'bob', currentCount: 5 },
    }
    render() {
        return (
            <CounterContext.Provider value={ this.state }>
                {this.props.children}
            </CounterContext.Provider>
        )
    }
}

import React, { Component } from "react";
import { RouteComponentProps } from "react-router";
import { CounterContext } from "../contexts/context.js";

export class Counter extends Component {
    state = { currentCount: 7 }

    render() {
        return <div className="m-2">
            <CounterContext.Consumer>
                {c =>
                    <div className="m-2">
                        <p>My name is {c.state.name} - {c.state.currentCount}</p>
                        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
                        <button className="btn btn btn-primary btn-sm m-2" onClick={() => { this.incrementCounter() }}>Increment</button>
                        <button className="btn btn-danger btn-sm m-2" onClick={() => { this.incrementCounter() }}>Delete</button>
                    </div>
                }
            </CounterContext.Consumer>
        </div>;
    }

    formatCount() {
        const currentCount = this.state.currentCount;
        return currentCount === 0 ? "Zero" : currentCount;
    }

    getBadgeClasses() {
        let classes = "badge m-2 badge-";
        classes += this.state.currentCount === 0 ? "warning" : "primary";
        return classes;
    }

    incrementCounter() {
        this.setState({
            currentCount: this.state.currentCount + 1
        });
    }
}

import React，{Component}来自“React”；
export const CounterContext=React.createContext（）；
导出默认类反提供程序扩展组件{
状态={
状态：{name:'bob'，currentCount:5}，
}
render（）{
返回(
{this.props.children}
)
}
}

这是我的计数器组件

import React, { Component } from "react";
export const CounterContext = React.createContext();

export default class CounterProvider extends Component {
    state = {
        state: { name: 'bob', currentCount: 5 },
    }
    render() {
        return (
            <CounterContext.Provider value={ this.state }>
                {this.props.children}
            </CounterContext.Provider>
        )
    }
}

import React, { Component } from "react";
import { RouteComponentProps } from "react-router";
import { CounterContext } from "../contexts/context.js";

export class Counter extends Component {
    state = { currentCount: 7 }

    render() {
        return <div className="m-2">
            <CounterContext.Consumer>
                {c =>
                    <div className="m-2">
                        <p>My name is {c.state.name} - {c.state.currentCount}</p>
                        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
                        <button className="btn btn btn-primary btn-sm m-2" onClick={() => { this.incrementCounter() }}>Increment</button>
                        <button className="btn btn-danger btn-sm m-2" onClick={() => { this.incrementCounter() }}>Delete</button>
                    </div>
                }
            </CounterContext.Consumer>
        </div>;
    }

    formatCount() {
        const currentCount = this.state.currentCount;
        return currentCount === 0 ? "Zero" : currentCount;
    }

    getBadgeClasses() {
        let classes = "badge m-2 badge-";
        classes += this.state.currentCount === 0 ? "warning" : "primary";
        return classes;
    }

    incrementCounter() {
        this.setState({
            currentCount: this.state.currentCount + 1
        });
    }
}

import React，{Component}来自“React”；
从“react router”导入{RouteComponentProps}；
从“./contexts/context.js”导入{CounterContext}；
导出类计数器扩展组件{
状态={currentCount:7}
render（）{
返回
{c=>
我的名字是{c.state.name}-{c.state.currentCount}

{this.formatCount（）}
{this.incrementCounter（）}}>Increment
{this.incrementCounter（）}}>Delete
}
;
}
formatCount（）{
const currentCount=this.state.currentCount；
返回currentCount==0？“零”：currentCount；
}
getBadgeClasses（）{
let classes=“badge m-2 badge-”；
classes+=this.state.currentCount==0？“警告”：“主要”；
返回类；
}
递增计数器（）{
这是我的国家({
currentCount:this.state.currentCount+1
});
}
}

我不太确定您在这里使用CounterContext，如果我误读了这个问题，很抱歉

当你说“状态已传递”时，你的意思是你正在尝试更新状态并显示更新后的状态吗

为此，您需要使用构造函数初始化您的状态：

constructor() {
    super();
    this.state = {
      currentCount: 7
    };
  };

---

然后可以使用此.setState（{}）更新状态。

第一步是将要调用的方法（更新状态的方法）移动到

反提供程序
类。然后将该方法传递到state对象中。完成此操作后，您现在可以将
计数器
类更新为如下内容：

<CounterContext.Consumer>
   {(c, methodName) =>
     <div className="m-2">
         My name is {c.state.name}
         <button onClick={methodName}></button>
     </div>
   }
</CounterContext.Consumer>


{（c，methodName）=>
我的名字是{c.state.name}
}

请注意，为了简化操作，我使用了
methodeName
并删除了修改的
CounterContext.Consumer
组件

您可以阅读有关上下文API的更多信息：
对不起，我认为我的措辞不太好，我的意思是，我正在传递块中的状态，我不想使用它来代替组件的本地状态，这有意义吗？我添加了一点更多的信息，这有帮助吗？或者我需要将formatCount移出组件并将其置于上下文中吗？谢谢您的评论，我已将其更改为以下内容，但这刚刚产生了一个空白结果。我不是在onClick上使用函数，而是根据计数器值获取特定文本。{formatCount}