使用道具时无法编辑输入文本文本 - Redux答案

【问题标题】：Not able to edit the input text text in react when using the props - Redux使用道具时无法编辑输入文本文本 - Redux
【发布时间】：2019-07-17 07:42:11
【问题描述】：

无法编辑文本，这里是主要组件

render() {
    return (
      <div className="container mb-5">
        <RenderProfessionalLearningTable {...this.props} />
      </div>
    );
  }


function RenderProfessionalLearningTable(props) {
  return (
<form className="container" onSubmit={props.professionalLearningFormsubmit}>
 <div className="form-row">
        <div className="form-group col-sm-6">
          <label>Course Name *</label>
          <input type="text" className="form-control" name="courseName" value={props.professionalLearning.courseName || ''} onChange={props.updateprofessionalLearningValue}
            aria-describedby="Course Name" placeholder="Enter a course name" />
        </div>
        <div className="form-group col-sm-6">
          <label>Provider *</label>
          <input type="text" className="form-control" name="provider" value={props.professionalLearning.provider || ''} onChange={props.updateprofessionalLearningValue}
            id="provider" aria-describedby="Provider" placeholder="Enter a Provider" />
        </div>
      </div >
</form >
);
}

这是动作创建者

export const actionCreators = {
updateprofessionalLearningValue: professionalLearningItem => async (dispatch, getState) => {
        let professionalLearning = getState().professionalLearning.professionalLearning;
        professionalLearning[professionalLearningItem.target.name] = professionalLearningItem.target.value;

        dispatch({ type: ReduxConstants.recieveProfessionalLearningUpdatecValue, professionalLearning });
    }
}

减速器

 case ReduxConstants.receiveFilterProfessionalLearningId:
            return {
                ...state,
                professionalLearning: action.professionalLearning,
                isLoading: false
            };

根据屏幕截图，我可以看到更改后的值，但 UI 没有反映它，并且不允许我添加超过 1 个字符。如果我按退格键也不允许我删除该值。

我关注的一些参考资料

Can't type in React input text field

https://github.com/facebook/react/issues/8053

【问题讨论】：

您检查props.professionalLearning.courseName 是否正在改变？
检查您是否正在更新updateprofessionalLearningValue中输入的正确字段onChange，
您传递给输入的值，即value={props.professionalLearning.courseName || ''} 和value={props.professionalLearning.provider || ''}，您确定这些值会在onChange 之后得到更新吗？
是的，如图所示，该值正在更新。但它只允许一个字符，第二个字符不显示。

标签： javascript reactjs redux react-redux

【解决方案1】：

问题在于下面的代码

case ReduxConstants.receiveFilterProfessionalLearningId:
            return {
                ...state,
                professionalLearning: action.professionalLearning, --> change this code
                isLoading: false
            }

新代码改为Object.assign({},action.professionalLearning)

case ReduxConstants.recieveProfessionalLearningUpdatecValue:
            return {
                ...state,
                professionalLearning: Object.assign({},action.professionalLearning),
                isLoading: false
            };

【讨论】：