需要使用React钩子并从该功能组件中分派动作

Question

当我调度props.network（netInfo）时，它在控制台中以

的形式发出警告

警告：无法在现有状态转换过程中（例如在render内进行更新）。渲染方法应该纯粹是props和state的函数。

我想使用{useNetInfo} react钩子，还需要调度动作。我该怎么做？

import React from 'react';
import {View, Modal, StyleSheet, Text, Platform} from 'react-native';
import {connect} from 'react-redux';

import {useNetInfo} from '@react-native-community/netinfo';
import {network} from '../actions/network';

const NetAlertModal = props => {
  const netInfo = useNetInfo();

  props.network(netInfo);

  return (
    console.log('NetInfo', netInfo),
    (
      <View>
        <Modal
          animationType="slide"
          transparent={true}
          visible={!netInfo.isInternetReachable}>
          <View style={styles.container}>
            <View style={styles.netAlert}>
              <View styles={styles.netAlertContent}>
                <Text style={styles.netAlertTitle}> No internet connected</Text>
              </View>
            </View>
          </View>
        </Modal>
      </View>
    )
  );
};


const mapDispatchToProps = dispatch => ({
  network: netInfo => dispatch(network(netInfo)),
});

export default connect(null, mapDispatchToProps)(NetAlertModal);