Question

我遇到了这个问题，我的一个组件在商店更换时没有更新。

这是不起作用的组件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
    );

EDIT ======

这是我的缩减器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
  }
}

抱歉，有很多代码。任何帮助，将不胜感激。感谢

Answer 1

我想这段代码：

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());
 })
}

Answer 2

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组件在商店更改时没有更新？

2 个答案: