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

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

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

如果由于某种原因确实需要使它们处于状态，则可以重写例如componentWillReceiveProps来更新组件的状态以反映新的道具。