Реквизиты, назначенные в конструкторе, недоступны в componentDidMount

Существует компонент Chat, определенный следующим образом:

constructor(props) {
      super(props);

      this.props = {
        eventId : props.navigation.state.params.eventId,
        user: props.navigation.state.params.user
      }
      console.info("user in chat  : ", this.props.user);
      console.info("event id in chat: ", this.props.eventId);
      this.state = {
        messages: []
      };
    };

    async componentDidMount() {
      try {
        let url = `http://192.168.2.133:3000/api/messages/e?_device_id=${encodeURIComponent(DeviceInfo.getUniqueID())}&event_id=${encodeURIComponent(this.props.eventId)}`;
        console.info("message URL : ", encodeURIComponent(url));
        let res = await fetch(encodeURIComponent(url), {
          method: "GET",
           headers: {
            "x-auth-token": "mytoken", 
          }
        });

Вот мой вывод консоли:

'event id in chat: ', 1
04-08 23:42:24.456 15213 15259 E ReactNativeJS: 'Warning: %s(...): When calling super() in `%s`, make sure to pass up the same props that your component\'s constructor was passed.', 'Chat', 'Chat'
04-08 23:42:25.085 15213 15259 I ReactNativeJS: 'message URL : ', 'http%3A%2F%2F192.168.2.133%3A3000%2Fapi%2Fmessages%2Fe%3F_device_id%3D02f7e7aa907a2a2b%26event_id%3Dundefined'

В числе event id есть Chat constructor, равное 1. Однако event_id, присвоенный this.props.eventId, является undefined в componentDidMount. Я понятия не имею, почему this.props.eventId не возвращает 1, как в конструкторе.

Вот функция _onPress в родительском компоненте, которая передает 2 реквизита:

_onPress(id) {
      this.props.navigation.navigate("Chat", {eventId: id, user: this.state.user});
    }

ты пробовал defaultProps вместо реквизита? и взгляните на stackoverflow.com/questions/51211188/… , это может помочь

Amas 09.04.2019 11:16
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
3
1
60
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Пропсы неизменяемы, вы не можете изменить их внутри самого компонента. Вместо этого используйте реквизит по умолчанию.

Удален блок назначения реквизита и используйте this.props.navigation.state.params.eventId для ссылки на значение.

user938363 09.04.2019 19:40

вы не можете редактировать дочерние реквизиты в дочернем компоненте, я предлагаю использовать их в состоянии, а в componentDidMount() вы можете проверить и обновить это, если оно изменится

Другие вопросы по теме