React Context API Consumer块中的调试器 - 这是未定义的

Question

I am trying to debug a component using Context API Consumer inside render method on browser dev tools. If i place break-point inside Consumer block, i can't print props etc. on console dynamically as this is undefined . Normally running this works fine, but while debugging only value of this is undefined . Following is sample render method of component.

  componentMethod = () => {
      console.log(this.props.name); //Placing breakpoint here, value is this is defined
  }

  render() {
        return (
            <div className={styles.container}>
                <div>
                    <h4>{this.props.name}</h4>
                </div>
                <div className={styles.block}>
                    <MyComponent.Consumer>
                        {
                            ({ firstParam, secondParam }) =>
                                <AotherComponent
                                    firstParam={firstParam}
                                    secondParam={secondParam}
                                    thirdParam={this.props.name}
                                />
                        }
                    </MyComponent.Consumer>
                </div>
            </div>
        )
  }

I could be related fat arrow use here, but I am able to get value of this while using break-point in componentMethod . Is there a way to bind this for Consumer block?

Answer 1

Try this, however, your question doesn't give enough context on what you are trying to solve. It would be better if you shared the Provider implementation as well and where you use it.

render() {
        const { name } = this.props;
        return (
            <div className={styles.container}>
                <div>
                    <h4>{name}</h4>
                </div>
                <div className={styles.block}>
                    <MyComponent.Consumer>
                        {
                            ({ firstParam, secondParam }) =>
                                <AotherComponent
                                    firstParam={firstParam}
                                    secondParam={secondParam}
                                    thirdParam={name}
                                />
                        }
                    </MyComponent.Consumer>
                </div>
            </div>
        )
  }

Answer 2

It looks like you are interested in knowing what your consumer is passing down to your component during execution. There are two ways to accomplish it.

Hard Way

Let us breakdown how the consumer works (using your sample). That may help you with finding the right place to debug.

in your render() method, you have a <MyComponent.Consumer> call. The new Context Consumer API is built on the render-prop pattern .

Important thing to remember about the render-prop pattern is that: it is a function call. This function should return something which react can consider while rendering the tree.

Since it is a function call, you can put your console.log statements before your element. You will have to add an explicit return statement though.

As to why it is undefined in your method. I am assuming that the componentMethod is not a lifecycle method, so it is possible that this or this.props is undefined based on how you are invoking that method. I do not see it invoked anywhere in your render method.

Eas(y/ier) Way:

Use react dev tools browser extension. You can look up all components by name . On clicking them you can see the props and state and even the context (as far as I remember). You can even change the values and see react react to it!