在 React 的 Axios getData 中使用道具时，历史推送未定义

Question

我正在尝试通过添加来自父级的 props 使这个 posts 组件可重用。我的道具是 'pathname' 和 'filter'。我有一个要更新的数据库的路径名和允许我从该数据库中过滤掉数据的过滤器。它根据路径名和过滤器打印出 post 的列表。这工作正常，我的帖子组件显示正确。

但是，当我向我的单数 post 添加点击功能以便它转到基于 post.id 的 'FullPost' 组件时，我收到一条错误消息说它 '无法读取未定义的属性 'push'。当我不使用道具而是对值进行硬编码时，它工作正常并且点击按预期工作，它转到 FullPost 组件和基于 id 的 url。

我试过打印 'this.props.history'，它确实显示 'undefined'。我不确定如何定义它以及为什么添加 props 会导致它未定义。

家长是这样称呼它的：

<Route path="/food" exact render={() => <Posts pathname="/posts" filter="food" />} />

render() 方法似乎不包含生命钩子，所以它不包含历史记录？但是，如果我在路由中不使用 render() 而不是 component={}，我不确定如何包含我的道具。

代码如下：

import React, { Component } from 'react';
import axios from '../../../axiosPosts';

import Aux from '../../../hoc/Aux/Aux';
import classes from './Posts.css';
import Post from '../../../components/Post/Post';


class Posts extends Component {

    state = {
        posts: []
    }

    componentDidMount () {
        //console.log('posts props: ', this.props.pathname, ', posts filter: ', this.props.filter, ', this props: ', this.props);
        this.getData(this.props.pathname, this.props.filter);
    }

    getData(pathname, filter) {

        axios.get(pathname + '.json')
        .then(response => {
            const post = response.data.filter(({category}) => category === filter);

            const updatedPosts = post.map(post => {
                return {
                    ...post
                }
            });

            this.setState({
                posts: updatedPosts
            });

            console.log( 'history: ', this.props.history );
        })
        .catch(error => {
            console.log(error);
        });
    }


    postSelectedHandler = ( id ) => {
        this.props.history.push( this.props.match.url + '/' + id );
    }

    render () {
        let posts = <p style={{textAlign: 'center'}}>Whoops! Something went wrong.</p>;

        if(!this.state.error) {
            posts = this.state.posts.map(post => {
                return (
                     <Post 
                         key={post.id}
                         title={post.title}
                         dek={post.dek}
                         clicked={() => this.postSelectedHandler( post.id )}     />
                );
            });
        };
        return (
            <Aux>
                 <div className={classes.PostList}>
                     <h2 className={classes.PostListTitle}>{this.props.filter}</h2>
                    {posts}
                </div>
            </Aux>
        )
    }
}

export default Posts;

Answer 1

你错过了route props：

<Route path="/food" exact render={(routeProps) => <Posts pathname="/posts" filter="food" {...routeProps} />} />

或（如果您只需要 history）：

<Route path="/food" exact render={({history}) => <Posts pathname="/posts" filter="food" history={history} />} />

在 React 的 Axios getData 中使用道具时，历史推送未定义

History push undefined when using props within Axios getData in React

javascript

prop

reactjs

axios