React redux组件未在商店更改上更新？

问题描述：

我遇到了这个问题，我的一个组件在更改存储时没有更新。React redux组件未在商店更改上更新？

这是行不通Single.js组件：

export default class Single extends React.Component { 

componentWillMount(){ 
    const { items } = this.props.articles; 
    const { id } = this.props.params; 

    if (items.length == 0 || typeof items == 'undefined') { 
     console.log('fetching'); 
     this.props.fetchArticles(fetch('http://localhost:8000/api/v1/article').then(res=>res.json())); 
    } 

} 

render(){ 
    const { items } = this.props.articles; 
    const { id } = this.props.params; 

    var index; 

    for(var i in items){ 
     var item = items[i]; 
     if (id == item.id){ 
       index = i; 
       break; 
     } 
    } 

    var item = this.props.articles.items[index]; 

    console.log(this.props.articles.items); 

    return <h1> {item.title} </h1> 
} 

}

这是我ArticleList.js组件，它不工作和更新本身正确：

import React from "react"; 

    import Vote from '../ArticleParts/Vote'; 
    import Thumbnail from '../ArticleParts/Thumbnail'; 
    import Title from '../ArticleParts/Title'; 

    export default class ArticleList extends React.Component { 

     componentWillMount(){ 
      this.props.fetchArticles(fetch('http://localhost:8000/api/v1/article').then(res=>res.json())) 
     } 

     renderArticles(item, i){ 
      return(
       <div class="row" style={{marginTop: "10px"}} key={i}> 
        <Vote id={item.id} score={item.score} i={i} {...this.props}/> 
        <Thumbnail thumbnail={item.thumbnail} id={item.id} type={item.type}/> 
        <Title title={item.title} id ={item.id}/> 
       </div> 
      ); 
     } 
     render(){ 

      console.log(this.props.articles.items); 

      return(
       <div> 
        {this.props.articles.items.map(this.renderArticles.bind(this))} 
       </div> 
      ); 
     } 
    }

我用连接在App.js：

import {bindActionCreators} from 'redux'; 
    import {connect} from 'react-redux'; 
    import * as ActionCreators from '../actions/ActionCreators'; 

    import Main from './Main'; 

    function mapStateToProps(state) { 
     return { 
     articles: state.articles, 
     votes: state.votes 
     } 
    } 

    function mapDispatchToProps(dispatch){ 
     return bindActionCreators(ActionCreators, dispatch); 
    } 

    const App = connect(mapStateToProps, mapDispatchToProps)(Main); 

    export default App;

这是我的索引对于路由器：

ReactDOM.render(
     <Provider store={store}> 
      <Router history={history}> 
       <Route path="/" component={App}> 
        <IndexRoute component={ArticleList}></IndexRoute> 
        <Route path="/:id" component={Single}></Route> 
       </Route> 
      </Router> 
     </Provider>, 
     app 
    );

编辑========

这是我减速articles.js：

import * as ActionConst from '../actions/ActionConst'; 

    const initialState = { 
     fetching: false, 
     fetched: false, 
     items: [], 
     error: null 
    } 

    function articles(state=initialState, action){ 
     switch (action.type){ 
      case ActionConst.articles_req: { 
       return { 
        ...state, 
        fetching: true 
       } 
      } 
      case ActionConst.articles_got: {  
       return { 
        ...state, 
        fetching: false, 
        fetched: true, 
        items: action.payload 
       } 
      } 
      case ActionConst.articles_err: { 
       return { 
        ...state, 
        fetching: false, 
        fetched: false, 
        error: action.payload 
       } 
      } 
      default: 
       return state; 
     } 
    } 

    export default articles;

这是我store.js：

import {createStore, compose, applyMiddleware} from 'redux'; 
    import {syncHistoryWithStore} from 'react-router-redux'; 
    import {browserHistory} from 'react-router'; 
    import thunk from 'redux-thunk'; 
    import logger from 'redux-logger'; 
    import promise from 'redux-promise-middleware'; 


    import RootReducer from './reducers/index'; 

    import votes from './data/votes'; 
    import articles from './data/articles'; 

    const middleware = applyMiddleware(promise(), thunk, logger()); 

    const store = createStore(RootReducer, middleware); 

    export const history = syncHistoryWithStore(browserHistory, store) 

    export default store;

在我的ActionCreators.js

export function fetchArticles(data){ 
    return { 
    type: action.articles_const, 
    payload: data 
    } 
}

对不起，有很多的代码。任何帮助，将不胜感激。感谢

有没有足够的代码。 reducer（s）可能会有帮助，也可能是从服务器获取的JSON的形状。另外，“不更新”太模糊。它显示文章（S）/项目/不清楚的东西，但不更新时，这些变化？或者它从不显示任何东西？那是什么'console.log'日志？ – DDS

我已经包含了reducer，JSON的结构在我的reducer的initialState中。因此，对于我工作的“ArticleList.js”组件，它将显示空白，然后显示文章列表。但在我的'Single.js'中它只是显示空白，但现在应该显示它的标题。 'console.log'只是简单地打印'[]'。这就是我的控制台的样子：http://i.imgur.com/Gg9Byrv.png – Parkicism

您想在获取文章后更新组件吗？我理解正确吗？ –

答

我想这样的代码：

componentWillMount(){ 
    this.props.fetchArticles(fetch('http://localhost:8000/api/v1/article').then(res=>res.json())) 
}

应该是：

componentWillMount(){ 
    fetch('http://localhost:8000/api/v1/article').then((res)=>{ 
    this.props.fetchArticles(res.json()); 
}) 
}

替换代码没有什么变化 – Parkicism

在'this.props.fetchArticles（res.json（））;'之前做一个'console.log（res）'。什么是注销？ –

'console.log（res）'输出这个：http://i.imgur.com/teA0XwU.png。虽然'console.log（res.json（））'输出了http://i.imgur.com/6yTY9Cm.png – Parkicism

答

resp.json()也返回一个承诺。所以，你将不得不调用另一个then得到数据：

变化：

this.props.fetchArticles(fetch('http://localhost:8000/api/v1/article').then(res=>res.json()))

到

this.props.fetchArticles(fetch('http://localhost:8000/api/v1/article').then(res=>res.json()).then(data => data))

或者更干净：

const { fetchArticles } = this.props; 
const data = fetch('http://localhost:8000/api/v1/article') 
    .then(res => res.json()) 
    .then(data => data) 
    .catch(err => throw err /* handle error somehow */); 

fetchArticles(data);

React redux组件未在商店更改上更新？

相关推荐