Question

我最近使用过Redux，我注意到props上的每次更新似乎都落后了一步。在第一个dispatch和console.log之后，它返回null值但是从第二个调度开始，它返回前一个值，并继续这样做。
我犯错了还是因为Redux？如果不是我，有什么方法可以改善这个吗？
的更新

我错误地说Redux返回null，这是初始状态，它实际上返回上一个动作的状态。假设我想在行动的那一刻返回状态。

import * as coord from "../actions/coordAction"

function mapStateToProps(store){
    return{
        status: store.coord.status,
        coord:store.coord.coord
    }
}

class Form extends React.Component{
    constructor(){
        super();
        this.Submit=this.handleSubmit.bind(this);
    }
    handleSubmit(e){
        e.preventDefault();

        let coords=[];
        coords.push(this.refs.xCoord.value);
        coords.push(this.refs.yCoord.value);
        coords.push(this.refs.zCoord.value);

        this.props.dispatch(coord.sendCoord(coords));
        console.log(this.props.coord);
        fetch(/*something*/);

    }

    render(){
        return(
            <div>
            <form className="coord_form" onSubmit={this.Submit}>
                <input name="xCoord" type="number" ref="xCoord" defaultValue="31" placeholder="xCoord" min="0" max="250" required/>
                <input name="yCoord" type="number" ref="yCoord" defaultValue="31" placeholder="yCoord" min="0" max="250" required/>
                <input name="zCoord" type="number" ref="zCoord" defaultValue="31" placeholder="zCoord" min="0" max="250" required/>
                <button type="submit">send coord</button>
            </form>
            </div>
        )
    }
}
export default connect(mapStateToProps)(Form)

store.js

import {applyMiddleware,createStore} from "redux"

import thunk from "redux-thunk"
import promise from "redux-promise-middleware"

import coord from "./reducers"

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

export default createStore(coord, middleware);

的 coordReducer.js

export default function reducer(state={
    status:null,
    coord:[]
},action){

    switch(action.type){
        case "GET_COORD":{
            return{
                ...state,
                status: "get",
                coord: [...state.coord,action.payload]
            }
        }
        case "SEND_COORD":{
            return{
                ...state,
                status: "send",
                coord: [...state.coord,action.payload]
            }
        }
    }
    return state;
}

Answer 1

从组件中调度操作时，组件的道具不会立即更新。组件更新已排队，但React尚未有机会实际应用更新。因此，所有道具仍然与派遣前相同。

Redux落后一步

1 个答案: