React + React Router 中的作用域

Question

我遇到范围界定问题。我可以从构造函数中 console.log this.props.routeParams.key 。但是当在构造函数之外，在 filterList 函数内时，我得到错误 "Uncaught TypeError: Cannot read property 'props' of undefined"。我的范围界定问题是什么？为什么它可以从构造函数中读取 this 而不是从 filterList 函数中读取？

我正在使用 React Router + Flux + React。

import AltContainer from 'alt-container';
import React from 'react';
import { Link } from 'react-router';
import Blogger from './Blogger'
import List from './List'
const rootURL = 'https://incandescent-fire-6143.firebaseio.com/';

import BlogStore from '../stores/BlogStore'
import BlogActions from '../actions/BlogActions';


export default class BlogShow extends React.Component {
  constructor(props) {
    super(props);
    {console.log(this.props.routeParams.key)}
}


filterList(key) {
  if (this.props.routeParams.key===key){
    return Blogstore.state.blog
  }
}

  render() {
             {Object.keys(BlogStore.state.blog).map(this.filterList)}
  }
}

Answer 1

发生这种情况是因为您的 filterList 函数未绑定到您的组件

在你的构造函数中绑定它

constructor(props) {
    super(props);
    this.filterList = this.filterList.bind(this);
}

你读过here

React + React Router 中的作用域

Scoping in React + React Router

flux

reactjs

react-router