Как перерисовать Flatlist в React Native, используя componentWillRecieveProps?

Question

    UNSAFE_componentWillMount(){
        this.props.EmployeeFetch();
    }

    renderRow(employee){
        return <ListItem employee={employee}/>;
    }
render(){
    return(
        <FlatList style={{flex:1,height:100}} 
        data = {this.props.employees}
        />
    );
    }
}
const mapStateToProps=state=>{
    const employees = _.map(state.employees,(val,uid)=>{
        return {...val,uid};
    });
    return {employees};
}
export default connect(mapStateToProps, {EmployeeFetch})(EmployeeList);

Здесь я получаю данные из базы данных. Сначала он стал нулевым, а через некоторое время пришли данные. Итак, как мне перерисовать новые данные с помощью Flatlist и componentWillRecieveProps ()?

Answer 1

Так что componentWillReceiveProps устарело, вы должны использовать getDerivedStateFromProps.

Вы можете использовать это так с вашим примером:

static getDerivedStateFromProps(props, state) {
   const { employees } = this.props;
   return employees;
}

Тогда в вашем render:

render() {
   const { employees } = this.props;

   // then use map(employees) 
}

Answer 2

Вы должны использовать функцию возврата 2.

1, которая возвращает загрузку (индикатор активности)

2, которая возвращает данные, если данные существуют в любом состоянии.

    constructor(props) {
        super(props);
        this.state = { isLoading: true};
    }
  render() {
    if(this.state.isLoading){
          return( 
            <View> 
              <ActivityIndicator size="large" color="#0c9"/>
            </View>
    )}
    return(
        <FlatList style={{flex:1,height:100}} 
        data = {this.props.employees}
        />
    );

const mapStateToProps=state=>{
    const employees = _.map(state.employees,(val,uid)=>{
        return {...val,uid};
    });
    if(employees){
         this.state.isLoading = false;
    }

    return {employees};
}

примечание: не забудьте импортировать реагирующие компоненты, а также, если вы используете реагирующую навигацию, попробуйте использовать события навигации для извлечения данных api вместо использования UNSAFE_componentWillMount () или найдите какое-либо другое решение.