«Не определено не является объектом» при оценке действия редукса (this.props.function) на новом экране

Question

У меня есть приложение с тремя вкладками (использующее реагирование-навигация v2).На одной вкладке у меня есть кнопка под названием «настройки», которая приводит пользователя к экрану настроек с помощью следующего:

<Button
 transparent
 danger
 onPress={() => this.props.navigation.navigate('Settings')}
>
 <Text>Settings</Text>
</Button>

Если я поиграюсь с приложением и нажму на разных экранах, ошибки нетпроисходит, и я могу перейти к экрану настроек просто отлично.Тем не менее, если я просто перезагрузил приложение, перейдите на соответствующую вкладку и нажмите на кнопку настроек, я получу следующую ошибку:

Методв ошибке упоминается (this.props.fetchAdminSettings) метод в классе SettingsScreen, к которому я пытаюсь перейти.Соответствующий код для класса SettingsScreen показан ниже.

import {
  fetchAdminSettings,
  logout
} from '../../actions';

class SettingsScreen extends Component {
  static navigationOptions = {
    title: 'Settings',
    headerStyle: {
      backgroundColor: '#ff0000',
    },
    headerTintColor: '#fff'
  };

  componentDidMount() {
    this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocus);
  }

  componentWillUnmount() {
    if (this.willFocusSubscription) {
      this.willFocusSubscription.remove();
    }
  }

  willFocus() {
    this.props.fetchAdminSettings(this.props.organization);
  }

         .
         .
[some render methods]
         .
         .

  render() {
    return (
      <Container>
        <Content>
          <View style={{ backgroundColor: 'white', flex: 1 }}>
            <View style={{ flex: 1, marginTop: 50 }}>
              <Text style={{ fontColor: 'red', fontSize: 10 }}>
                {this.props.errorMessage}
              </Text>
              {this.renderAdminSettings(this.props.admin)}
              {this.renderUserSettings()}
            </View>
          </View>
        </Content>
      </Container>
    );
  }
}

const mapStateToProps = (state) => {
  const { organization, rank, firstName, lastName, admin } = state.auth;

  const { loadingAdminSettings,
    securityCode,
    totalBrotherhoods,
    totalChapters,
    totalCommunityService,
    totalDues,
    totalMixers,
    errorMessage
  } = state.settings;

  return ({
    organization,
    rank,
    firstName,
    lastName,
    admin,
    loadingAdminSettings,
    securityCode,
    totalBrotherhoods,
    totalChapters,
    totalCommunityService,
    totalDues,
    totalMixers,
    errorMessage
  });
};

export default connect(mapStateToProps, {
  fetchAdminSettings,
  logout
})(SettingsScreen);

EDIT И создатель действия fetchAdminSettings выглядит следующим образом:

export const fetchAdminSettings = (organization) => {
  return (dispatch) => {
    dispatch({ type: FETCH_ADMIN_SETTINGS });
    firebase.database().ref(`${organization}/admin`)
      .on('value', snapshot => {
        dispatch({ type: FETCH_ADMIN_SETTINGS_SUCCESS, payload: snapshot.val() });
    });
  };
};

Любая помощь, которую вы можете оказатьменя бы оценили!

Answer 1

Исправлено!

Я не совсем уверен, почему, но источником проблемы был код, который я использую для перерисовки экрана в Focus (показанном ниже).

Iсам запустил функцию fetchAdminSettings в componentWillMount (), и она сработала.

componentDidMount() {
    this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocus);
  }

  componentWillUnmount() {
    if (this.willFocusSubscription) {
      this.willFocusSubscription.remove();
    }
  }

  willFocus() {
    this.props.fetchAdminSettings(this.props.organization);
  }

Answer 2

Вы передали объект в качестве второго аргумента в вызов connect.

Как указано в документе , каждое поле в таком объекте должно быть создателем действия. создатель действия - это функция, которая должна возвращать действие.Вместо этого вы возвращаете функцию, которая принимает диспетчеризацию в качестве аргумента.

Разве это не должно быть что-то вроде этого?

//...

function mapDispatchToProps(dispatch) {
  return {
    fetchAdminSettings(organization) {
      dispatch({ type: FETCH_ADMIN_SETTINGS });
      firebase.database().ref(`${organization}/admin`)
        .on('value', snapshot => {
          dispatch({ type: FETCH_ADMIN_SETTINGS_SUCCESS, payload: snapshot.val() });
      });
    },
    logout() {
      // ...
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SettingsScreen);