Question

我有一个mapStateToProps函数，我获取帖子（所有帖子），然后在render（）函数中定位id

show_posts.js（组件）

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchPost } from '../actions';

class PostsShow extends Component {
    componentDidMount() {

        const { id } = this.props.match.params ; 
        this.props.fetchPost(id);
    }


    render() {

        posts[this.props.match.params.id]; // the post i want to show

        return (
            <div>
            <h3>Title of the Post will be Here</h3>             
            </div>);
    }
}

function mapStateToProps(state) {
    return { posts: state.posts};

}
export default connect(mapStateToProps, {fetchPost})(PostsShow);

如果posts[this.props.match.params.id]中没有获取所有帖子（想象如果有几百个帖子），我怎样才能传递用户请求的单个帖子。

index.js（行动）

import axios from 'axios';

export const FETCH_POST = 'FETCH_POST';

const ROOT_URL = 'http://xxxx.abcac.com/api';
const API_KEY = '?key=xxxxxxxx';



export function fetchPost(id) {
    const request = axios.get(`${ROOT_URL}/posts/${id}${API_KEY}`);

    return {
        type: FETCH_POST,
        payload: request
    };

}

在我看来，我们可以在mapStateToProps函数中定位特定的帖子，即：state.match.params.id，而不是所有的帖子。但不知道实施它的正确方法

我是新蜜蜂反应，任何帮助将不胜感激！感谢

Answer 1

mapStateToProps采用通常写为ownProps的第二个参数。这是传递给它所连接的组件的道具。您可以在react-redux docs

中了解相关信息

以下是我如何实施您所要求的内容：

function mapStateToProps(state, ownProps) {
    const postId = ownProps.match.params.id;
    const post = state.posts[postId];

    return { 
        post 
    };
}

Answer 2

如何返回单个帖子：

function mapStateToProps({ posts }, ownProps) {
    return { post: posts[ownProps.match.params.id]};
}

mapStateToProps函数，定位帖子的id而不是所有帖子

2 个答案: