Cannot display JSON data from API on antd table - reactjs

Question

My parent component is:
constructor(){
super();
this.state = {data: []}
}
componentWillMount(){
this.props.getData(); //makes api call
this.setState({data: this.props.data}); //get data stored in the store
}
render(){
const columns ={ //columns here}
return(
<Tables
dataSource = {this.state.data}
columns = {this.columns}
/>
)
}
const mapStateToProps = state => ({
data: state.data,
})
const mapDispatchToProps = dispatch => ({
getData: () => dispatch(getData()),
})
I do get data when I console it, but when I try to set state of data with the data props. It says data.slice is not a function.
//saga
export function* getData(action){
try{
const data = yield call(axios.get, 'http://localhost:4000/data');
console.log(data);
if (data) {
yield put(updateData(data.data));
}catch(e){
console.log(e);
}
}
//actions
export const updateData = data => ({
type: UPDATE_DATA,
data
});
//reducers
export const INITIAL_STATE = Immutable({});
export const updateData = (state, action) => {
console.log('reducers', action.data);
return { ...state, ...action.data };
};
const ACTION_HANDLERS = {
[UPDATE_DATA]: updateData,
};
export default createReducer(INITIAL_STATE, ACTION_HANDLERS);
I do not know what I am doing wrong while setting the state. I cannot seem to find out the errors.
Please help me

Answer 1

this.setState({data: this.props.data}); //get data stored in the store
The data is not yet there. If you really wants to set the state to use the prop data, you need to update your state in your componentWillReceiveProps(nextProps) lifecycle function, not on componentDidMount().
Analyzing this function
componentWillMount(){
this.props.getData(); //makes api call
this.setState({data: this.props.data}); //get data stored in the store
}
when you call getData(), the browser will do its thing and your redux state will be updated eventually, so, when the second line is called, the data is not yet there.
You could use some promises and/or async/await functions, but you don't really need to. You can use the regular component lifecycle functions and, event better, you can use this.props.data and not have an internal state at all.