React Context API - 如何在条件方法的提供者中获取对状态对象的引用 [英] React Context API - How to Get Reference To State Object In Provider For A Conditional Method

问题描述

我正在测试 React 的 Context API，并已成功将我的状态项和方法传递给消费者组件.但是，当我向该方法添加一些条件逻辑时，我丢失了对状态对象项的引用.我收到无法读取未定义的属性‘颜色’"错误.我如何通过该状态对象中的颜色键进行引用，以便我可以运行逻辑?我可以在 Provider 组件中执行此操作，还是只能在 Consumer 组件中执行此逻辑?

I am testing out React's Context API and have successfully passed down my state items and a method to a Consumer component. However, when I add some conditional logic to the method I am losing reference to the state object items. I get a "Cannot read property 'color' of undefined" error. How do I reference by color key in that state object so I can run the logic? Am I able to do this in the Provider component or am I only able to do this logic in the Consumer component?

提供者容器文件 - ProviderComp.js

Provider Container File - ProviderComp.js

class ProviderComp extends Component{
    
    state={
        name: "Gary",
        age: 20,
        color: "Red",
        changeMind: function(){
            if(this.color === "Red"){
                document.getElementById("root").style.background="blue";
                document.getElementById("root").style.color="white";
                this.setState({
                    name: "Tony",
                    age: 35,
                    color: "Blue"
                })
            }
            if(this.color === "Blue"){
                document.getElementById("root").style.background="red";
                document.getElementById("root").style.color="black";
                this.setState({
                    name: "Gary",
                    age: 20,
                    color: "Red"
                })
            }
        }
    }

    render(){
        return(
            <UserInfo.Provider value={{state:this.state}}>
                {this.props.children}
            </UserInfo.Provider>
        )
    }
}

export default ProviderComp;

消费者组件 - ConsumerComp.js

Consumer Component - ConsumerComp.js

import React, {Component} from "react";
import UserInfo from "./ContextData";


class ConsumerComp extends Component{
    
    render(){
        return(
            <UserInfo.Consumer>
                {(context)=>(
                    <React.Fragment>
                        <p>My Name Is: {context.state.name}</p>
                        <p>My Age Is: {context.state.age}</p>
                        <p>My Favorite Color Is: {context.state.color}</p>
                        <button onClick={context.state.changeMind}>Changed My Mind</button>
                    </React.Fragment>
                )}
            </UserInfo.Consumer>
        )
    }
}

export default ConsumerComp;

推荐答案

谢谢 Chris.问题在于 ES5 语法.我需要使用粗箭头语法 => 将其绑定到组件.这允许我访问逻辑中的状态.这是工作代码.请注意，在此过程中，上下文 API 允许跳过向多个级别发送道具，这非常酷.

Thank you Chris. The issue is with the ES5 syntax. I needed to use a fat arrow syntax => to bind this to the component. This allowed me to access state in my logic. This is the working code. Note that with this process the context API allows one to skip sending props down multiple levels which is pretty cool.

import React, {Component} from "react";
import UserInfo from "./ContextData";

class ProviderComp extends Component{
    
    state={
        name: "Gary",
        age: 20,
        color: "Red",
        changeMind: ()=>{
            if(this.state.color === "Red"){
                document.getElementById("root").style.background="blue";
                document.getElementById("root").style.color="white";
                this.setState({
                    name: "Tony",
                    age: 35,
                    color: "Blue"
                })
            }
            if(this.state.color === "Blue"){
                document.getElementById("root").style.background="red";
                document.getElementById("root").style.color="black";
                this.setState({
                    name: "Gary",
                    age: 20,
                    color: "Red"
                })
            }
        }
    }

    render(){
        return(
            <UserInfo.Provider value={{state:this.state}}>
                {this.props.children}
            </UserInfo.Provider>
        )
    }
}

export default ProviderComp;

这篇关于React Context API - 如何在条件方法的提供者中获取对状态对象的引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！