我很反应和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'));
})
}
};