Reactjs 后退一步
我最近使用了Redux,我注意到Reactjs 后退一步,reactjs,redux,Reactjs,Redux,我最近使用了Redux,我注意到props上的每次更新似乎都落后一步。在第一次dispatch和console.log之后,它返回null值,但在第二次分派之后,它返回上一次分派的值并继续这样运行。 是我犯了错误还是因为Redux?如果不是我,有什么办法可以改进吗? 更新 我的错误是说Redux返回null,这是初始状态,它实际上返回上一个操作的状态。假设我想返回执行操作时的状态 import * as coord from "../actions/coordAction" function
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)
coordReducer.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);
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;
}
当您从组件内部分派操作时,组件的道具不会立即更新。组件更新已排队,但React尚未有机会实际应用更新。因此,所有的道具仍然与发布前一样。您需要发布一些代码,这不是标准behavior@rpadovani对不起,我错了,我已经更新了我的问题