状态更改时组件无法重新渲染

Question

我是新手。我想确认输入 JSON 是否有效并在屏幕上显示。正在触发 ValidConfiguration 操作，reducer 正在返回新状态，但智能组件 add-config-container 没有被重新渲染

这是我的文件：动作

import {
    VALID_CONFIGURATION,
    INVALID_CONFIGURATION,
    SAVE_CONFIGURATION,
    START_FETCHING_CONFIGS,
    FINISH_FETCHING_CONFIGS,
    EDIT_CONFIGURAION
} from '../constants';

function validateConfiguration(jsonString) {
    try {
        JSON.parse(jsonString);
    } catch (e) {
        return false;
    }
    return true;
}

export function isConfigurationValid(state) {
    if (validateConfiguration(state.jsonText)) {
        return({type: VALID_CONFIGURATION, state : state});
    } else {
        return({type: INVALID_CONFIGURATION, state : state});
    }
}

export function fetchConfiguration() {
    return ({type : START_FETCHING_CONFIGS});
}

export function finishConfiguration(configs) {
    return ({type : FINISH_FETCHING_CONFIGS, configs: configs});
}

export function editConfiguration(index) {
    return ({type : EDIT_CONFIGURATION, index : index});
}

export function saveConfiguration(config) {
    return ({type: SAVE_CONFIGURATION, config : config});
}

容器组件

import React, {Component} from 'react';
import {Button, Input, Snackbar} from 'react-toolbox';
import {isConfigurationValid, saveConfiguration} from '../../actions/config';
import { connect } from 'react-redux';
import style from '../../theme/layout.scss';

class AddConfigContainer extends Component {

    constructor(props) {
        super(props);
        this.state = {jsonText: '', key: '', valid: false, showBar : true};
    }

    handleChange(text, value) {
        this.setState({[text]: value});
    }

    handleSnackbarClick() {
        this.setState({ showBar: false});
    };

    handleSnackbarTimeout() {
        this.setState({ showBar: false});
    };

    render() {
        let {onValid} = this.props;
        return (
            <div>
                <h4>Add Configs</h4>
                <span>Add configs in text box and save</span>

                <Input type='text' label='Enter Key'
                       value={this.state.key} onChange={this.handleChange.bind(this, 'key')} required/>

                <Input type='text' multiline label='Enter JSON configuration'
                       value={this.state.jsonText} onChange={this.handleChange.bind(this, 'jsonText')} required/>

                <div>IsJSONValid = {this.state.valid ? 'true': 'false'}</div>

                <Snackbar action='Dismiss'
                          label='JSON is invalid'
                          icon='flag'
                          timeout={2000}
                          active={ this.state.showBar }
                          onClick={this.handleSnackbarClick.bind(this)}
                          onTimeout={this.handleSnackbarTimeout.bind(this)}
                          type='accept'
                          class = {style.loader}
                />

                <Button type="button" label = "Save Configuration" icon="add" onClick={() => {onValid(this.state)}}
                        accent
                        raised/>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    let {
        jsonText,
        key,
        valid
    } = state;

    return {
        jsonText,
        key,
        valid
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        onValid : (value) => dispatch(isConfigurationValid(value)),
        saveConfiguration: (config) => dispatch(saveConfiguration(config))
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(AddConfigContainer);

减速机

import assign from 'object.assign';
import {VALID_CONFIGURATION, INVALID_CONFIGURATION} from '../constants';

const initialState = {
    jsonText : '',
    key : '',
    valid : false,
    showBar: false,
    configs: [json],
    activeConfig : {},
    isFetching: false
};

export default function reducer(state = initialState, action) {
    if (action.type === VALID_CONFIGURATION) {
        return (assign({}, state, action.state, {valid: true}));
    } else if (action.type === INVALID_CONFIGURATION) {
        return assign({}, state, action.state, {valid: false});
    } else {
        return state;
    }
}

Answer 1

我认为您的组件确实会重新渲染，但您实际上从未使用道具中的 valid 值（即 this.props.valid）。您只使用 this.state.valid，但代码中的任何地方都没有更改。请注意，Redux 不会（也不能）更改组件的内部状态，它只会将新的 props 传递给组件，因此您需要使用 this.props.valid 来查看更改的发生。本质上，您应该考虑是否需要 valid 存在于组件的状态中。我不认为你这样做，在这种情况下，你拥有的所有状态数据（可能 showBar 除外）都不需要存在，你可以从道具中获取它。

如果出于某种原因确实需要让它们处于状态，您可以覆盖例如componentWillReceiveProps 更新组件的状态以反映新的道具。

状态更改时组件无法重新渲染

Component not able to re-render when state is changed

javascript

reactjs

redux

react-redux