如何在ReactJS中將變量從一頁傳遞到另一頁？

Question

我已經導出了多個變量，但是出於某種原因，我用於存儲該變量的方法似乎不起作用。 我有登錄頁面，該頁面將正確的值存儲到“ ID”中，如下所示

import AuthService from './AuthService';

let ID = "";


class LoginPage extends Component {
  constructor(props) {
    super(props);
      this.state = {
      username: '',
      password: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.Auth = new AuthService();
  }


  handleFormSubmit(e){
    e.preventDefault();

    this.Auth.login(this.state.username,this.state.password)
        .then(res =>{
          if(this.Auth.state.isA)
           this.props.history.push('/AdminApp');
          else if(this.Auth.state.isA === 0 && this.Auth.state.sub === 0)
          { 
            ID = this.Auth.state.userID;
            console.log(ID) // This prints the right value
            this.props.history.push('/SDForm')
          }
        })
        .catch(err =>{
            alert(err);
        })
  }

  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }

  render() {
    return (
     <Container>
        <Col className="UCFLogo"><img src={logo} /></Col>
        <Form className="LoginForm">
          <Col>
            <h1 className="mainTitles">Senior Design Project Selection</h1>
            <h3 className="subTitle">Sign In</h3>
          </Col>

          <Col>
            <FormGroup className="LoginPad">
              <Label className="subTitle">Knights Email</Label>
              <Input className="LoginInfo" type="text" name="username" id="username" onChange={this.handleChange.bind(this)} value={this.state.username} />
            </FormGroup>
          </Col>

          <Col>
            <FormGroup>
              <Label className="subTitle" for="password">Password</Label>
              <Input className="LoginInfo" type="password" name="password" id="password" onChange={this.handleChange.bind(this)} value={this.state.password} />
            </FormGroup>
          </Col>

          <Button className="subTitle" onClick={this.handleFormSubmit}>Submit</Button>

        </Form>
      </Container>
    );
  }
}

export default LoginPage;
export {ID};

然后，我需要將登錄時的ID加載到form.js文件中的狀態（如下所示）中，以便在提交時將其返回到json，我只是嘗試將ID打印到控制台，直到我知道得到正確的值，並且出於長度的考慮，我剪切掉了大部分代碼，但是我在控制台中得到了

ƒ LoginPage(props) {
    var _this;

    Object(C_csform_master_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_1__["default"])(this, LoginPage);

    _this = Object(C_cs…

form.js

import ID from './LoginPage';
const Auth = new AuthService();



class SDForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: "",
      ID: "",
    }
    this.Auth = new AuthService();
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }


  printToConsole = () => {
    console.log(ID) 
  }

  render() {
    return (
      <Container>
        <Form className="SDForm">

          // Form stuff


        <Col className="subTitle">
          <Button onClick={this.printToConsole}>Submit</Button>
        </Col>
      </Form>
      </Container>
    );
  }
}

export default withAuth(SDForm); 

Answer 1

這不是在React中組件之間傳遞信息的正確方法。 在大多數情況下，最好的方法是將ID的值放在Redux存儲中，或將ID值存儲到它們的狀態中，然后將ID狀態作為道具傳遞給SDForm組件，如下所示：

import SDForm from './SDForm.js'

和它們（一旦獲得ID值並將其存儲在state ）：

const { ID } = this.state; 

然后在<SDForm />中使用您認為合適的ID prop。

<SDForm id={ID} />