this.context 使用 react-redux 时为空对象

Question

我正在将 http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/ 中的代码示例实施到我的代码库中。不幸的是，我得到了 this.context.

的空对象

这是我的一些代码。路由器路由到包含表单和文本的登录组件。让我知道是否有任何需要更清楚的地方，我是 React 的新手。

谢谢！

export const MakeMainRoutes = (props) => {
  return (
    <Router history={browserHistory}>
      <Route path="/" component={Container} auth={auth}>
        <IndexRedirect to="/home" />
        <Route path="home" component={Home} onEnter={requireAuth} />
        <Route path="login" component={Login} onEnter={parseAuthHash} />
      </Route>
  </Router>
  )
}

export default MakeMainRoutes

class Form extends React.Component {
  static propTypes = {
    children: PropTypes.node,
    values: PropTypes.object,
    update: PropTypes.func,
    reset: PropTypes.func,
    onSubmit: PropTypes.func
  }

  static childContextTypes = {
    update: PropTypes.func,
    reset: PropTypes.func,
    submit: PropTypes.func,
    values: PropTypes.object
  }

  getChildContext() {
    return {
      update: this.props.update,
      reset: this.props.reset,
      submit: this.submit,
      values: this.props.values
    };
  }

  render() {
    return (
      <form>
        {this.props.children}
      </form>
    )
  }
}

export default Form

import React, { PropTypes } from 'react';
import TextField from 'material-ui/TextField';
import * as validators from '../../libs/validators'

class Text extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    label: PropTypes.string
  };

  static contextTypes: {
    update: PropTypes.func.isRequired,
    values: PropTypes.object.isRequired
  };

  updateValue(value) {
    this.context.update(this.props.name, value);
  }

  onChange(event) {
    this.updateValue(event.target.value)
  }

  render() {
    return (
      <div>
        <TextField
          hintText={this.props.placeholder}
          floatingLabelText={this.props.label}
          value={this.context.values[this.props.name]}
          onChange={this.onChange}/>
      </div>
    )
  }
}

export default Text

Answer 1

错别字：

static contextTypes: {

==>

static contextTypes = {

this.context 使用 react-redux 时为空对象

this.context empty object when using react-redux

reactjs

react-router

react-redux