Question

我的问题是为什么我的React项目中的Cities组件看不到任何道具。怎么了我也不明白为什么减速器不从axios异步更新状态。怎么了？

这是此项目的github链接：https://github.com/technoiswatchingyou/reg-form-demo

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { citiesRequestReducer } from './citiesRequestReducer';

const rootReducer = combineReducers({
  cities: citiesRequestReducer
});

const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

App.js

import React, { Component } from 'react';
import './App.css';
import Cities from './cities';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Cities />
      </div>
    );
  }
}

export default App;

city.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { citiesRequestAction } from './citiesRequestAction';
import { bindActionCreators } from 'redux';

class Cities extends Component {
  componentDidMount() {
    this.props.onCitiesRequest();
    console.log(this.props);
  }

  render() {
    return (
      <select className="custom-select">
        {this.props.cities.map(city => (
          <option key={city.id}>{city.name}</option>
        ))}
      </select>
    );
  }
}

const mapStateToProps = state => ({
  cities: state.cities
});

const mapDispatchToProps = dispatch => {
  return bindActionCreators(
    {
      onCitiesRequest: citiesRequestAction
    },
    dispatch
  );
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Cities);

citiesRequestReducer.js

import { CITIES_REQUEST } from './citiesRequestAction';

const initialState = [];

export function citiesRequestReducer(state = initialState, action) {
  switch (action.type) {
    case CITIES_REQUEST:
      return {
        ...state,
        cities: action.payload
      };
    default:
      return state;
  }
}

citiesRequestAction.js

import axios from 'axios';

export const CITIES_REQUEST = 'CITIES_REQUEST';
const GET_CITIES_URL = 'https://www.mocky.io/v2/5b34c0d82f00007400376066?mocky-delay=700ms';

function citiesRequest(cities) {
  return {
    type: CITIES_REQUEST,
    payload: cities
  };
}

export function citiesRequestAction() {
  return dispatch => {
    axios.get(GET_CITIES_URL).then(response => {
      dispatch(citiesRequest(response.data.cities));
    });
  };
}

Answer 1

所以问题出在citiesRequestReducer中。我只需要返回{...state, cities: action.payload}而不是返回action.payload。

为什么我在ReactJS项目中的<cities>组件看不到任何道具？

1 个答案: