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

Posted 2023-02-22

【中文标题】Textfield 对 Reducer 没有反应，尽管 console.log 显示正确的值

【英文标题】：Textfield does not react to Reducer, although console.log show correct value

【发布时间】：2017-08-17 23:40:35

【问题描述】：

我想编写一个迭代学校班级学生的工具。 所以我在反应组件中有一个文本字段，它显示一个值：

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

如果我将它的值绑定到瞳孔名称（这是由我的 Redux 存储作为道具提供给我的组件的），它总是向我显示正确的值，只要存储中的值发生变化。

但是，如果学生的名字不准确，我也希望用户能够更改学生的名字。如果输入字段的值与道具绑定，则此方法不起作用。

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

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

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

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

这一切都很好，但是现在当我想遍历学校课程时，包含当前或活动学生的减速器是正确的（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;
    

我的减速机和所有学生：

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

【问题讨论】：

请贴出相关的redux代码。您的问题并不清楚仅从描述中是否可以完全理解问题。

你发现有什么缺陷吗？

【参考方案1】：

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

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

相反，做

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