将道具正确传递给道路的组件：

Question

App.js

import React, { Component } from 'react';
import { Router, Route, browserHistory } from 'react-router';
import Login from './Login';
import Courses from './Courses';

class App extends Component {
  constructor() {
    super();

    this.state = {
      username: '',
      password: ''
    };
  }

  setCredentials = ({ username, password }) => {
    this.setState({
      username,
      password
    });
  }

  render() {
    return (
      <Router history={browserHistory}>
        <Route
          path='/'
          component={Login}
          setCredentials={this.setCredentials}
          />
        <Route
          path='/courses'
          component={Courses}
          credentials={this.state}
          />
      </Router>
    );
  }
}

Login组件从用户接收凭据，通过API调用验证它们，使用它们更新App的状态，然后使用{{1重定向到Courses组件}}

this.props.router.push('/courses')组件应将更新的凭据（即Courses的更新状态）作为道具，然后执行API调用以获取该用户的课程。

如何检测App组件中App状态的更新？我完全错了吗？

Answer 1

将道具正确传递给道路的组件：

   <Route
      path='/'
      component={(props) => <Login  setCredentials={this.setCredentials} {...props} />}
      />

和NOT：

   <Route
      path='/'
      component={Login}
      setCredentials={this.setCredentials}
      />

对于Courses组件，您以相同的方式传递额外的道具：

    <Route
      path='/courses'
      component={(props) => <Courses credentials={this.state} {...props} />}
      />

而不是：

    <Route
      path='/courses'
      component={Courses}
      credentials={this.state}
      />

回答了这个问题：

如何在Courses组件中检测App状态的更新？

因为crendentials成为Courses的道具及其state的值App。

Answer 2

正如你所说的道具组件阅读道具，你可以在课程组件中有一个生命周期钩子：

componentWillReceiveProps(nextProps) {
  if(nextProps.isAuthenticated && this.props.credentials !== nextProps.credentials) {
    // perform fetch for courses here
  }
}

React-Router：在新道具上更新路线的组件

2 个答案:

将道具正确传递给道路的组件：