Question

场合我有一个使用redux的reactjs应用程序。我有一个容器和一个演示组件。我的演示文稿组件呈现一个包含简单文本输入字段数组的表单，并且我通过了一个＆＃39; onChange＆＃39;从容器到表示组件的回调函数，当输入其中一个文本字段时，该组件调度操作以更改redux状态。

问题当表示组件安装时，表示组件成功地从redux状态呈现文本字段的正确值，但是当我键入字段时不会更新。如果我在容器中记录传递给mapStateToProps中的表示组件的props，我可以看到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:"foo@bar.com"}]
        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 }
    }

Answer 1

正如评论中所讨论的，这是由于状态突变。

尝试更改您的reducer代码，如下所示：

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
    )}

reactjs表示comopnent不重新渲染redux状态变化

1 个答案: