ничего не срабатывает после выборки данных из БД реагирует на родную - PullRequest
Новая
       23

ничего не срабатывает после выборки данных из БД реагирует на родную

0 голосов
/ 26 мая 2019

у меня есть 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 и извлекаю данные с использованием приставки, и данные возвращаются

для первого 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);

мой образ консоли

console log

Редактировать

и это мой 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;
  }
}

1 Ответ

0 голосов
/ 26 мая 2019 
static getDerivedStateFromProps(props, state){
  console.log(` getDerivedStateFromProps `);
  return null;
  }

Возвращение null не будет обновлять состояние при смене реквизита, если вы этого хотите. Попробуйте удалить этот код.

...