Question

我在componentDidMount()中调用了一个异步函数，我希望在使用获取的数据更新状态之后，该组件应该重新渲染，但是没有。

组件代码：

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

function mapDispatchToProps(dispatch){
    return bindActionCreators(actionCreators, dispatch)
}

export default class Main extends React.Component{

    constructor(props){
        super(props)
    }

    componentDidMount(){
        this.fetchData()
    }

    fetchData(){
        this.props.getAllPosts().then(() => {
            console.log('props: ' + JSON.stringify(this.props))
            this.props.posts.data.map( post => {
                console.log(post.content)
            })
        })
    }

    render(){
        return(
            <div>
                {!this.props.loaded
                    ? <h1>loading...</h1>
                    :
                    <div>
                        {this.props.posts.data.map(post => {
                            return(
                                <div>
                                    <h2>{post.title}</h2>
                                    <p>{post.content}</p>
                                </div>
                            )
                        })}
                    </div>
                }
            </div>
        )
    }
}

const Home = connect(mapStateToProps, mapDispatchToProps)(Main)

动作：

export function fetchAllPosts(){
    return{
        type: 'FETCH_ALL_POSTS'
    }
}

export function receivedAllPosts(posts){
    return{
        type: 'RECEIVED_ALL_POSTS', 
        post_list: posts
    }
}

export function getAllPosts(){
    return (dispatch) => {
        dispatch(fetchAllPosts())
        return fetch('/api/posts')
            .then(response => response.json())
            .then(json => {
                dispatch(receivedAllPosts(json.data))
            })
            .catch(error => {

            })
    }
}

减速器：

export function posts(state = {loaded: false}, action){
    switch(action.type){
        case 'FETCH_ALL_POSTS':
            return Object.assign({}, state, {
                'loaded': false
            })
        case 'RECEIVED_ALL_POSTS':
            return Object.assign({}, state, {
                'data': action.post_list, 
                'loaded': true
            })

        default:
            return state
    }
}

在console.log()的{{1}}中，我确实看到数据已被抓取，所以这意味着它处于状态，但未应用于componentDidMount()，我不知道知道原因。

Answer 1

如果您使用带有根减速器的多个Reducer，那么您还应该将减速器的名称提供给import posts from './posts'; const rootReducer = combineReducers({ posts });函数。

e.g：

rootreducer.js：

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

组件：

{{1}}

Answer 2

原因很简单：您应该使用this.props.posts.loaded，而不是this.props.loaded。

当你将州设置为道具时：

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

这里state.posts实际上是你的reducer中的对象：

{
  'data': action.post_list, 
  'loaded': true
}

与使用this.props.posts.data访问您的帖子列表类似，您应该使用this.props.posts.loaded。我相信您可以轻松地通过debugger或console.log进行调试。

实时代码：JSFiddle

componentDidMount没有触发render（）

2 个答案: