Question

在我的反应中我redux与redux-thunk一起使用。现在我在我的组件中获得了props但我无法访问我的组件props中的最新 methods所以我使用componentWillReceiveProps使用nextprops获取最新道具然后我将nextprops保存到我的states，但此处的问题是setState 异步
所以当我提取时类方法中的特定状态，获取上一个状态值而不是状态中保存的nextprops值。但是当我使用state获取最新状态值时，使用类方法来控制setInterval中的setState因为export function pickup(latlng) { return function(dispatch) { dispatch({ type: PICKUP_STATE,payload:latlng }); }; }值已保存。下面是我的代码

行动创作者

import {
    PICKUP_STATE,
    PICKUP_ADD,
    DROPOFF_STATE
} from '../actions/types';

    export default  (state={},action) => {
        const INITIAL_STATE = {
            pickup: '',
            pickupAdd:''
        };
        switch(action.type) {
            case PICKUP_STATE:
                console.log(action.payload)
                return {...state,pickup:action.payload};
            case PICKUP_ADD:
                return{...state,pickupAdd:action.payload};
            case DROPOFF_STATE:
                return {...state,dropoff:action.payload}
            default:
                return state;
        }
        //return state;
    }

减速

import {
    connect
} from "react-redux";
import * as actions from "../actions"
class Map extends React.Component {
      componentWillReceiveProps(nextprops) {
             if (nextprops.pickupProps !== undefined) {
                 this.setState({
                     pick: nextprops.pickupProps
                 }, () => {
                     console.log(this.state.pick);

                 });
             }
       }
   isPickEmpty(emptyPickState) {
        this.props.pickup(emptyPickState);
    // setTimeout(() =>{ console.log('sdkjlfjlksd',this.state.pick) 
                        },3000);
        console.log(this.state.pick);
   }
}
const mapStateToProps = (state) => {
    // console.log(state.BookingData.pickup);
    return {
        pickupProps:state.BookingData.pickup,
        pickupAddProps: state.BookingData.pickupAdd
        }
}
export default connect(mapStateToProps,actions)(Map);

组件

import React        from "react";
import ReactDOM     from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import "normalize.css/normalize.css"
import  "./styles/styles.scss";
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import reduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

import AppRouter from './routers/AppRouter';
import reducers from './reducers';
import {AUTH_USER} from "./actions/types";


const middleware = [
    reduxThunk,
];

const store = createStore(reducers, composeWithDevTools(
    applyMiddleware(...middleware),
// other store enhancers if any
));



const token = localStorage.getItem('token');
if(token){
    store.dispatch({type:AUTH_USER});
}

ReactDOM.render(
    <Provider store={store}>
        <AppRouter />
    </Provider>
    , document.getElementById('app'));

App Root 文件

props

1-如何在类方法中访问最新 nextprops OR
2-如何在类方法中访问setState min-height值 OR
3- 任何最佳方式来解决这种情况

请任何人帮我解决这个问题，我从3天开始坚持

Answer 1

如果我理解正确，您仍然需要添加一个映射来分派以从商店获取更新的状态。仍然需要调用操作创建器，然后使用componentsnetDidMount

将其挂载到类方法中

  componentDidMount() {
    this.props.fetchPickUp();
  }

const mapDispatch = dispatch => {
  return {
    fetchPickUp: () => dispatch(pickUp()),
  };

如何在类方法中处理redux道具

1 个答案: