从数据库中获取数据后没有任何反应

Question

我有index.js 包含Tabs 每个选项卡呈现相同的组件（animate.js）但具有不同的道具，代码如下：

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>
        )
    });

在animate.js 中，我收到category_id 号码并使用redux 获取数据，然后数据取回

首先animate.js 在数据返回后不会触发任何渲染，但如果我切换选项卡，一切正常

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);

我的控制台图像

编辑

这是我的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;
  }

返回null 不会在道具更改时更新状态，如果那是你想要的。 尝试删除此代码。