Textfield 对 Reducer 没有反应，尽管 console.log 显示正确的值

Question

我想编写一个遍历学校学生的工具 class。所以我在一个显示值的反应组件中有一个文本字段：

<input className="form-control" onChange={this.handleInputChange} value={this.props.activePupil.name}></input>

如果我将它的值绑定到 pupilName（它作为 prop 由我的 Redux store 提供给我的组件），只要 store 中的值发生变化，它总是会向我显示正确的值。

但是，我也希望用户能够更改学生的名字，如果它不准确的话。如果输入字段的值与道具相关联，这将不起作用。

所以我想我会把它绑定到某个本地状态，在构造函数中我这样做了：

this.state = {
     inputField: "No Pupil selected yet."
   };

...每当用户编辑文本字段时，这将在 handleInputChange 方法中处理，如下所示：

  this.setState({
      inputField: evt.target.value
  });

一切正常，但现在当我想遍历学校 class 时，包含当前或活跃学生的减速器是正确的（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

以上组件从容器中给出以下参数：

<PupilViewer nextPupil={this.props.nextPupil} pupilList={this.props.pupils} activePupil={this.props.activePupil} saveChanges={this.props.saveChanges} updateActivePupil={this.props.updateActivePupil}/>

我需要在这里指出，nextPupil、saveChanges 和 updateActivePupil 是我在这里传递的函数。我有两个减速器。一个包含所有瞳孔的对象，另一个包含活动瞳孔：

主动瞳孔缩小器：

export default function (state={id: -1, name:"Default Pupil Name in State"}, action) {
  switch (action.type) {
      case "UPDATE_ACTIVE":
        let newState = action.payload;
        return newState;
      case "GET_ACTIVE":
        return state;
      default:
        return state;
    }
}

我的 reducer 与所有学生：

//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
  }
};

Answer 1

不确定这是否会修复所有问题并使其按预期工作，但你永远不应该这样做

this.state.inputField = this.props.activePupil.name;

相反，做

this.setState({ inputField: this.props.activePupil.name })

Textfield 对 Reducer 没有反应，尽管 console.log 显示正确的值

Textfield does not react to Reducer, although console.log show correct value

javascript

flux

reactjs

redux

react-redux