nothing fires after fetch data from DB react native - react-native

Question

i have index.js contain's Tabs each tab render the same component (animate.js) but with different props, the code as the following:
index.js
categoryList.map((item,index) => {
if(item.head_category == category_id)
return (
<Tab heading={item.category_name} key={index}>
<Animate category_id={item.category_id}/>
</Tab>
)
});
in the animate.js i receive the category_id number and fetch the data using redux , and the data gets back
for first animate.js rendering nothing fires after the data returns but if i switch the tabs everything works grate
animate.js
import React from 'react';
import { InteractionManager, StyleSheet, Text, View, Button } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import {LineDotsLoader} from 'react-native-indicator';
import {goodsAction} from './redux/actions'
class animate extends React.Component {
constructor(props) {
super(props);
this.state = {
category_id:'',
loading:true,
};
console.log('constructor');
}
componentDidMount(){
const { category_id, category_name } = this.props;
this.props.goodsAction({category_id}); // My fetching Action
console.log(`componentDidMount `);
}
componentWillReceiveProps(nextProps){
console.log(`componentWillReceiveProps`)
}
static getDerivedStateFromProps(props, state){
console.log(` getDerivedStateFromProps `);
return null;
}
componentDidUpdate(prevProps, prevState) {
console.log(` componentDidUpdate `);
}
renderPage() {
return (
<View style={{ flex: 1 }}>
// anything
</View>
);
}
render(props) {
console.log(`render`);
if (this.props.loading) {
// if redux still fetching return loading:true else return false
return(<View style={styles.container}><LineDotsLoader /></View>)}
return (
<View style={styles.container}>
{this.renderPage()} // or anything
</View>
);
}
}
const mapStateToProps = state => {
return {
error: state.goods.error,
loading: state.goods.loading,
goods: state.goods.goods
}
}
export default connect(mapStateToProps, { goodsAction })(animate);
my console image
Edit
and this is my goodsRedusers.js
import {
GOODS_LOADING_ATTEMPT,
GOODS_REFRESH_ATTEMPT,
GOODS_LOADED,
GOODS_FAILED
} from '../actions/types';
const INITIAL_STATE = { goods:[], loading: true, error: '', }
export default (state = INITIAL_STATE, action) => {
switch(action.type) {
case GOODS_LOADING_ATTEMPT://dispatch before connecting to db
return {...INITIAL_STATE, loading: true }
case GOODS_FAILED:
return {...INITIAL_STATE, loading: false, error: action.error }
case GOODS_LOADED://dispatch after data gets back
return {...INITIAL_STATE, loading: false, goods: action.goods }
default:
return state;
}
}

Answer 1

static getDerivedStateFromProps(props, state){
console.log(` getDerivedStateFromProps `);
return null;
}
Returning null won't update the state when props change, if that's what you want.
Try removing this code.