状态更改后,我的组件不会重新渲染

时间:2017-07-27 15:13:34

标签: reactjs redux axios

我很反应和Redux,我遇到了异步状态变化的问题。 我试图在api调用后重新呈现子组件。调用api并返回一个新状态,但重新渲染never happens 我知道这可能是一个基本用法的问题,但我已经被困在这几个小时,我无法通过它。

感谢您的帮助

//This is my parent component
@connect(state => ({example: state.example }))
class DetectorlistContainer extends Component {
  render() {
        const {example} = this.props;
    return (
				  <DetectorlistComponent detectors={example.data}/>
    )

  }
}

//This is my child component
class DetectorlistComponent extends Component {
  render () {
      if (this.props.detectors.length == 0) {
          console.log('no data');
          return (<div className="DetectorListComponent">NNo detectors</div>);
      }
    return (
        <div className="DetectorListComponent">
            <Grid>
                <Row>
                    {console.log('there is data')}
                </Row>
            </Grid>
        </div>
    );
  }
}

//this is my reducer

function exampleReducer(
    state = {
        isLoading: false,
        currentDetector: undefined,
        data: [],
        error: false
    },
    action = null) {
	switch(action.type) {
		case types.RECV_ERROR:
			return Object.assign({}, state, {isLoading: false, data: action.data, error: true});
		case types.RECV_DATA:
			return Object.assign({}, state, {isLoading: false, data: action.data, error: false });
		case types.REQ_DATA:
			return Object.assign({}, state, {isLoading: true, error: false });
		default:
			return state;
	}
};

const rootReducer = combineReducers({
	example: exampleReducer
});

//this is my fetchData action

export function fetchData(url) {
    return function (dispatch) {
        dispatch(requestData());
        return axios({
            url: url,
            timeout: 20000,
            method: 'get',
            responseType: 'json'
        })
            .then(function (response) {
                console.log('fetch data correct')
                console.log(response.data);
                dispatch(receiveData(response.data));
            })
            .catch(function (response) {
                console.log('fetch data error')
                dispatch(receiveError(response.data));
                dispatch(pushState(null, '/error'));
            })
    }
};

0 个答案:

没有答案
相关问题