組件狀態變化時無法重新渲染

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更新組件的狀態以反映新的道具。