reactjs - React + React Router 中的范围界定

标签 reactjs react-router flux

我遇到了范围界定问题。我可以从构造函数中 console.log this.props.routeParams.key 。但是,当在构造函数之外的 filterList 函数内时,我收到错误“Uncaught TypeError:无法读取未定义的属性“props””。我的范围界定问题是什么?为什么它可以从构造函数中读取 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)}
  }
}

最佳答案

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

将其绑定(bind)到构造函数中

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

您读到过here

关于reactjs - React + React Router 中的范围界定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36967825/

相关文章:

reactjs - 带有 IE11 polyfill 导入的 Starter create-react-app 在 IE11 中仍然中止

javascript - React forwardRef - 在组件内和父级中访问 ref

reactjs - 仅当尝试通过地址栏访问路由时,Firebase 上托管的 React 路由器应用程序才会出现 404 错误

javascript - React Js,this.context 在构造函数方法中未定义

javascript - 为什么将同步状态放在 redux store 中?

reactjs - 如何使用 Apollo Client 和 GraphQL HoC 并行运行多个突变?

ReactJS Datepicker 多个日期选择

amazon-s3 - 如何解决SPA上的 "x-cache: Error from cloudfront"

javascript - react-router-dom: 无效的 hook 调用,Hooks 只能在函数组件的内部调用

javascript - 为什么 redux 使用对象的不变性来管理应用程序的状态,而 Flux 不使用?