代码之家 › 专栏 › 技术社区 › Ishan Patel

未在React容器中呈现GET response

rendering reactjs

Ishan Patel · 技术社区 · 6 年前

以下是我的容器代码。我正在从WordPress博客中获取帖子。

我在控制台中获得了正确的控制台登录,但由于某些原因,此部分 {this.props.posts.map(this.renderPosts)} 容器中的未正确渲染,仅渲染为空白 P 要素

我怎样才能解决这个问题?

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
import {fetchPosts} from '../../action/index';
import {bindActionCreators} from 'redux';

class Blog extends Component {

    componentDidMount(){
        this.props.fetchPosts();
    }
   renderPosts(postData){               
      return Object.keys(postData.posts).map(id => {
        return (
                <div id={postData.posts[id].site_ID}>{postData.posts[id].title}</div>
        ); 
    });
}
    render(){
        console.log('Posts are: ',this.props.posts);
        return (
            <div>
                <Link to="/posts/new"><button> Add a New Post </button> </Link>  
                <p>
                    {this.props.posts.map(this.renderPosts)}
                </p>  
            </div>
        );
    }
}
function mapStateToProps(state){
    return {
        posts: state.posts
    };
}
function mapDispatchToProps(dispatch){
    return bindActionCreators({fetchPosts}, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Blog);

1 回复 | 直到 6 年前

Viljar Rolfsen 6 年前

renderPosts(postData){               
   return Object.keys(postData.posts).map(id => {
        console.log('pd', postData.posts[id]);
        return (
            <tr>
                <p>{postData.posts[id].title}</p>
            </tr>
        ); 
    });
}

renderPosts()中缺少返回

推荐文章