reactjs - 如何使用 componentWillRecieveProps 在 React Native 中重新渲染 Flatlist？

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

在这里，我正在从 firebase 获取数据。起初它是空的，过了一段时间数据来了。那么，我将如何使用 Flatlist 和 componentWillRecieveProps() 重新渲染新数据？

标签： reactjsfirebasereact-nativereduxreact-redux

Answer 1

所以componentWillReceiveProps不推荐使用，你应该使用getDerivedStateFromProps.

您可以在示例中像这样使用它：

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

然后在你的render：

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

   // then use map(employees) 
}