Javascript Textfield不会对Reducer作出反应,尽管console.log显示正确的值
我想写一个工具,它可以遍历一个学校班级的学生。 因此,我在react组件中有一个文本字段,它显示一个值:Javascript Textfield不会对Reducer作出反应,尽管console.log显示正确的值,javascript,reactjs,redux,react-redux,flux,Javascript,Reactjs,Redux,React Redux,Flux,我想写一个工具,它可以遍历一个学校班级的学生。 因此,我在react组件中有一个文本字段,它显示一个值: <input className="form-control" onChange={this.handleInputChange} value={this.props.activePupil.name}></input> …并且每当用户编辑文本字段时,都将使用handleInputChange方法处理,如下所示: this.setState({ in
<input className="form-control" onChange={this.handleInputChange} value={this.props.activePupil.name}></input>
…并且每当用户编辑文本字段时,都将使用handleInputChange方法处理,如下所示:
this.setState({
inputField: evt.target.value
});
这一切都很好,但现在,当我想遍历学校类时,我的reducer(包含当前或活动的学生)是正确的(console.log显示正确的值),但输入字段中显示的值总是落后一个
为什么会这样
编辑:完整代码:
// Import React
import React from 'react';
class PupilViewer extends React.Component{
constructor(props) {
super(props);
this.state = {
inputField: "No Pupil selected yet."
};
this.handleInputChange = this.handleInputChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
handleInputChange(evt) {
this.setState({
inputField: evt.target.value
});
}
onSubmit(e) {
e.preventDefault();
this.props.nextPupil();
this.state.inputField = this.props.activePupil.name;
}
render() {
// Return JSX via render()
return (
<div className="">
<h1>Pupil View</h1>
<input className="form-control" onChange={this.handleInputChange} value={this.state.inputField}></input>
<button className="btn btn-large btn-positive" onClick={this.onSubmit}>Next</button>
</div>
);
}
}
// Export Search
export default PupilViewer
我与所有学生的对话:
//my default array
let default_pupils = [{
id: 0,
name: "Matthew",
//there are more attributes here
},
{
//and there are more pupils here
}];
export default function (state=default_pupils, action) {
switch (action.type) {
case "SAVE_CHANGES":
let newState = [...state];
newState[2] = {...newState[2], name: action.payload.name };
return newState;
default:
return state;
}
}
最后,我的行动如下:
var activePupilCount = 0;
export const getActivePupil = () => {
return {
type: "GET_ACTIVE"
};
}
export const updateActivePupil = (pupil) => {
console.log("UPDATE:" + pupil.name)
return {
type: "UPDATE_ACTIVE",
payload: pupil
};
}
export const nextActivePupil = () => {
return (dispatch, getState) => {
const {activePupil, pupilList} = getState();
activePupilCount++;
console.log("COUNT:"+ activePupilCount);
const nextIndex = (activePupilCount) % pupilList.length;
const nextActive = pupilList[nextIndex];
dispatch({ type: "UPDATE_ACTIVE", payload: nextActive });
}
};
export const saveChanges = (pupil) => {
return {
type: "SAVE_CHANGES",
payload: pupil
}
};
不确定这是否会修复所有问题并使其按预期工作,但您永远不应该这样做
this.state.inputField = this.props.activePupil.name;
相反,你应该这样做
this.setState({ inputField: this.props.activePupil.name })
请发布相关的redux代码。从你的问题来看,仅仅从描述来看,问题是否完全可以理解还不清楚。你看到任何缺陷了吗?
var activePupilCount = 0;
export const getActivePupil = () => {
return {
type: "GET_ACTIVE"
};
}
export const updateActivePupil = (pupil) => {
console.log("UPDATE:" + pupil.name)
return {
type: "UPDATE_ACTIVE",
payload: pupil
};
}
export const nextActivePupil = () => {
return (dispatch, getState) => {
const {activePupil, pupilList} = getState();
activePupilCount++;
console.log("COUNT:"+ activePupilCount);
const nextIndex = (activePupilCount) % pupilList.length;
const nextActive = pupilList[nextIndex];
dispatch({ type: "UPDATE_ACTIVE", payload: nextActive });
}
};
export const saveChanges = (pupil) => {
return {
type: "SAVE_CHANGES",
payload: pupil
}
};
this.state.inputField = this.props.activePupil.name;
this.setState({ inputField: this.props.activePupil.name })