组件状态变化时无法重新渲染

Question

我是新来的反应。我想确认输入的JSON是否有效，并在scree上显示。动作ValidConfiguration被解雇，减速还是返回了新的状态，但智能型组件附加配置容器没有被重新呈现

这里是我的文件： 行动

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

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

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