情况我有一个使用redux的reactjs应用程序。我有一个容器和一个演示组件。我的演示文稿组件呈现了一个带有简单文本输入字段数组的表单，并且我将一个“ onChange”回调函数从容器传递给了演示文稿组件，当在其中键入文本字段之一时，该分派一个动作来更改redux状态。
问题演示文稿组件安装时，演示文稿组件成功地从redux状态为文本字段呈现了正确的值，但是当我在字段中键入内容时，该组件并没有更新。如果我将传递到表示组件的道具记录mapStateToProps在容器中，则可以看到onChange函数已正确调度到商店，并且redux状态正在正确更新。但是，发生这种情况时，表示组件不会重新渲染，因此在文本字段中键入不会更新视图（键入不会执行任何操作）。
formConnector
import { connect } from 'react-redux'
import Form from '../components/Form'
import { changeElementValue } from '../actions/actions'
const mapStateToProps = (state) => {
//e.g. state.elements = [{id:"email", value:"[email protected]"}]
let props = {
elements: state.elements,
}
//state and props.elements.{id}.value changes successfully when I
//type in one of the input fields, but
//the the Form component is not re-rendered
console.log(props)
return props
}
const mapDispatchToProps = (dispatch) => {
return {
onElementChange: (id, value) => {
dispatch(changeElementValue(id, value))
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Form)
缩径机
function formReducer(state = initialState, action = null) {
switch(action.type) {
case types.CHANGE_ELEMENT_VALUE:
let newState = Object.assign({}, state)
newState.elements[action.id].value = action.value
return newState
default:
return state;
}
}
行动
import * as types from './actionTypes'
export function changeElementValue(id, value) {
return { type: types.CHANGE_ELEMENT_VALUE, id, value }
}
如评论中所述，这是由于状态突变。
尝试如下更改减速器代码：
case types.CHANGE_ELEMENT_VALUE: {
const newElements = state.elements.map(function(el, index) {
return action.id === index
? Object.assign({}, el, { value: action.value })
: el;
});
return Object.assign({}, state, { elements: newElements );
}
或更优雅：
case types.CHANGE_ELEMENT_VALUE:
return { ...state, elements: state.elements.map((el, index) => (
action.id === index ? { ...el, value: action.value } : el
)}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句