为什么这个孙子的论点没有定义？ （上下文，反应）

Question

TL;DR I'm trying to send arguments from a grandchild component to App.js using Context. It's being called, but its arguments are undefined.

Here is what I return in App.js render():

.... 
setId(data){
    alert('called')
    console.log(data)
}
render(){
    return
    (<UserContext.Provider value = {{setId: this.setId.bind(this)}}>
      <StartPage/>
    </UserContext.Provider>)

}

Startpage contains a component called LoginForm, which I want to call setId from. In LoginForm:

    login(context, e){
        e.preventDefault
        context.setId('test')
    }

    render(){
        return(
            <UserContext.Consumer>
            {(context)=>{
            return(
                <form onSubmit = {this.login.bind(this, context)}>
                 .....
                </form>)}
            <UserContext.Consumer>
    }

When I submit from LoginForm, I do get an alert, but my console.log logs 'undefined'. It seems like I'm passing and using the correct function (setId) from App.js, but I'm not correctly passing back an argument from LoginForm...

Answer 1

The sample code you provide has some error, should fail to execute. Maybe due to you just copy/paste part of your original code. But after I fix all the errors, it works as expected. Here is the updated version.

import React, { Component } from "react";

const UserContext = React.createContext({});

class StartPage extends Component {
  login(context, e) {
    e.preventDefault();
    context.setId("test");
  }

  render() {
    return (
      <UserContext.Consumer>
        {context => (
          <form onSubmit={this.login.bind(this, context)}>
            <input type="text" value="some value" onChange={console.log} />
            <button type="submit">SUBMIT</button>
          </form>
        )}
      </UserContext.Consumer>
    );
  }
}

export default class ContextForm extends Component {
  setId(data) {
    console.log("called", data);
  }

  render() {
    return (
      <UserContext.Provider value={{ setId: this.setId.bind(this) }}>
        <StartPage />
      </UserContext.Provider>
    );
  }
}