componentDidMountがrender（）を起動しませんでした

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 => { 

      }) 
    } 
} 

減速：それは意味してcomponentDidMount()でconsole.log()で

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 
    } 
} 

、私は、データをフェッチしました見ていますそれは状態にありますが、render()には適用されません。私はkをしません今なぜ。

Answer 1

それはので単純な理由である：あなたの代わりにthis.props.loadedの、this.props.posts.loadedを使用する必要があります。

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

this.props.posts.dataを経由してアクセスあなたの記事のリストを使用するので、同様の

、あなたが使用する必要があります。state.postsは実際にあなたの減速からのオブジェクトである

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

ここ：あなたは小道具にあなたの状態を設定し

this.props.posts.loaded。 debuggerまたはconsole.logで簡単にデバッグできると思います。

ライブコード：JSFiddle

Answer 2

ルートレデューサーで複数のレデューサーを使用している場合は、レデューサーの名前をmapStateToProps関数にも指定する必要があります。

例えば：

rootreducer.js：

import posts from './posts'; 
const rootReducer = combineReducers({ posts }); 

コンポーネント：

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