1

私のページのナビゲーションを処理するために、react-router と react-router-redux を使用しています。コンポーネント内でプログラムで URL を変更する必要があります。これを達成するために history.push というメソッドを使用しようとしましたが、このメソッドは URL を変更するだけであり、この URL に関連付けられたコンポーネントは更新されません。このアプリはページネーション付きの単純なリストであるため、次のページに切り替えると、たとえば /posts/1 から /posts/2 に URL が変更されますが、ビューは更新されません。これは次のように機能するはずだと思います：

  1. ユーザーがページネーション項目をクリックすると、クリック ハンドラーが呼び出され、引数としてページ番号が渡されます
  2. クリック ハンドラー内で history.push(/posts/[page]) を呼び出します。リンクコンポーネントを使用できますが、ユーザーがページネーション項目をクリックしたときに何かできるようにしたいです
  3. ObjectList コンポーネントが再びマウントされ、 componentDidMount が呼び出されることを期待しています

これはおそらく最良のアプローチではないので、ヒント リンクがハードコードされていること、特に最初の引数がハードコードされていることをお勧めします。私のソース コード:

client.js

import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, IndexRoute, browserHistory} from "react-router";
import Results from "./views/Results";
import Home from "./views/Home";
import App from './components/App'
import { Provider } from 'react-redux';
import store, { history } from './store';


const app = document.getElementById('app');

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
        <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="/:category/:cityId/:pageNum" component={Results}></Route>
    </Route>
    </Router>
  </Provider>,
  app
);

store.js

import { createStore, compose, applyMiddleware } from 'redux'
import { syncHistoryWithStore } from 'react-router-redux'
import thunkMiddleware from 'redux-thunk'
import { browserHistory } from 'react-router'
import rootReducer from './reducers/index'
import createLogger from 'redux-logger'
import categories from './data/categories'

const loggerMiddleware = createLogger()

const defaultState = {
    categories,
    resultsList: {
      objects: [],
      counters: [],
      isFetching: false
    }
};

const store = createStore(
  rootReducer,
  defaultState,
  compose (
    applyMiddleware(
      thunkMiddleware,
      loggerMiddleware
    ),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )
);
export const history = syncHistoryWithStore(browserHistory, store)
export default store

ObjectList.js

import React from "react";
import ObjectItem from "../components/ObjectItem"
import Loader from "../components/Loader"
import fetchObjects from "../actions/actionCreators";
import switchUrl from "../actions/actionCreators";
import PaginationPanel from "../components/PaginationPanel"
import classNames from 'classnames'
import { push } from 'react-router-redux';
import { browserHistory } from 'react-router'
import store, { history } from '../store';


export default class ObjectList extends React.Component {
  static defaultProps = {
      objectsPerPage: 20,
      objectContainerClassName: 'object_list_items'
  }

  constructor(props) {
      super(props);
  }

  componentDidMount() {
    this.props.fetchObjects(this.props.params.pageNum);
  }

  paginateHandler(page) {
      this.props.history.push('/hotele/1/'+page)
  }

  render() {
    const { resultsList } = this.props

    if(resultsList.items.length > 0) {
      const ObjectComponents = resultsList.items.map((item) => {
          return <ObjectItem key={item.post_id} {...item}/>;
      });

      const paginationComponent =
        <PaginationPanel
            {...this.props}
            pageNum={Math.ceil(resultsList.counters.allPosts/this.props.objectsPerPage)}
            pageClickedHandler={this.paginateHandler.bind(this)}
            currentPage={parseInt(this.props.params.pageNum)}
        />

      return (
        <div className="object-lists">
            <div className={this.props.objectContainerClassName}>
                <div>{ObjectComponents}</div>
            </div>
            {paginationComponent}
        </div>
      )
    }
    else if(!resultsList.isFetching || resultsList.items.length === 0) {
      return <Loader />;
    }
  }
}

ホーム.js

import React from "react"
import { Link } from "react-router"


const Home = React.createClass({
  render() {
    return (
      <div>
          Strona główna <br />
      <Link to={`/hotele/1/1`}>Lista wyszukiwania</Link>
      </div>
    )
  }
})

export default Home

結果.js

import React from "react";
import ObjectList from "../components/ObjectList"
import CategoryTabs from "../components/CategoryTabs"
import fetchObjects from "../actions/actionCreators"


export default class Results extends React.Component{
  constructor(props) {
    super(props);
  }

  render() {
      return (
          <div>
              <CategoryTabs { ...this.props } />
              <ObjectList { ...this.props } />
          </div>
      );
  }
}

レデューサー/index.js

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'

import objects from './objects'
import categories from './categories'

const rootReducer = combineReducers({objects, categories, routing: routerReducer})

export default rootReducer

レデューサー/objects.js

function objects(state = {
  isFetching: false,
  items: [],
  counters: []
}, action) {
  switch (action.type) {
    case 'RECEIVE_OBJECTS':
      return Object.assign({}, state, {
        isFetching: false,
        items: action.objects.posts,
        counters: action.objects.counters
      })
    default:
      return state;
  }
}

export default objects

app.js

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


function mapStateToProps(state) {
  return {
    resultsList: state.objects,
    categories: state.categories
  }
}

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

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

export default App;

actionCreators.js

import fetch from 'isomorphic-fetch'
import { push } from 'react-router-redux';


function receiveObjects(objects, json) {
  return {
    type: 'RECEIVE_OBJECTS',
    objects
  }
}

function requestObject(pageNum) {
  return {
    type: 'REQUEST_OBJECTS',
    pageNum
  }
}

export function fetchObjects(pageNum) {
  return dispatch => {
      dispatch(requestObject(pageNum));

      let url = 'http://localhost:8080/posts?city=986283&type=hotel&page='+pageNum;

      return fetch(url)
        .then(response => response.json())
        .then(json => dispatch(receiveObjects(json)));
  }
}
4

1 に答える 1

2

コンポーネント ツリーを変更していないため、ObjectList コンポーネントは再度マウントされません。それはまだです

<Home>
    <Results>
        <ObjectList />
    </Results>
</Home>

別のルートに移動して別のルートコンポーネントをマウントした場合にのみ再マウントされるため、ツリー全体が変更されます。しかし、あなたは別の小道具を渡しているだけです。使用する必要があります

componentWillReceiveProps(nextProps) {
  this.props.fetchObjects(nextProps.params.pageNum);
}
于 2016-06-25T11:35:22.860 に答える