Переход на другую страницу после того, как setState выдает ошибку во 2-й раз - PullRequest
Новая
       6

Переход на другую страницу после того, как setState выдает ошибку во 2-й раз

0 голосов
/ 05 июня 2018

Я использую response-native-navigation (не уверен, будет ли это актуально) и пытаюсь работать с простыми реквизитами.Тем не менее, когда я иду на ScreenB из ScreenA, он работает без каких-либо ошибок.После этого, если я pop() показываю экран ScreenA и затем снова нажимаю на тот же компонент, чтобы перейти к ScreenB, приложение вылетает со следующей ошибкой:

Вы попытались установить ключ aсо значением 2 для объекта, который должен быть неизменным и заморожен.

Вот минимальный пример кода в ScreenA: Preview: 

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { navigationActions } from 'react-native-navigation';

export default class Preview extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: { a: 0, b: 1, c: 2 }
    };
  }

  _goToFullview() {
    let temp = this.state.data;
    temp.a = 2;
    this.setState({ data: temp });
    this.props.navigator.push({ screen: "App.FullView", passProps: { data: this.state.data } });
  }

  render() {
    return (
      <View>
        <Text>{"a: " + this.state.data.a + ","}</Text>
        <Text>{"b: " + this.state.data.b + ","}</Text>
        <Text>{"c: " + this.state.data.c}</Text>
        <TouchableOpacity onPress={ () => this._goToFullview() }>
          <Text>Go To Fullview</Text>
        </TouchableOpacity>
      </View>
    )
  }

}

И вот ScreenB: FullView: 

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { navigationActions } from 'react-native-navigation';

class Fullview extends Component {

  render() {
    return (
      <View>
        <Text>{"a: " + this.props.data.a + ","}</Text>
        <Text>{"b: " + this.props.data.b + ","}</Text>
        <Text>{"c: " + this.props.data.c}</Text>
        <TouchableOpacity onPress={ () => this.props.navigator.pop({ animated: true, animationType: 'fade' }) }>
          <Text>Go back to preview</Text>
        </TouchableOpacity>
      </View>
    )
  }

}

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

1 Ответ

0 голосов
/ 05 июня 2018

Существуют некоторые проблемы в реагирующей нативной навигации, связанные с вашей.

Каким-то образом передача некоторых реквизитов навигатору сделает их неизменяемыми и замороженными.

Итак, на вашем экранеA когда вы делаете 

this.props.navigator.push({ screen: "App.FullView", passProps: { data: this.state.data } });

Возможно, this.state.data станет неизменным и при попытке изменить его в следующий раз, когда он сломается.

Можете ли вы попробовать, передав другую ссылкунапример: 

this.props.navigator.push({ screen: "App.FullView", passProps: { data: {...this.state.data} } });

Чтобы посмотреть, работает ли он?

РЕДАКТИРОВАТЬ:

Если ваши data.a, data.b и data.c также являются объектами, вы будетевозможно, вместо этого нужно сделать deepClone (см .: https://github.com/wix/react-native-navigation/issues/394#issuecomment-255936630)

this.props.navigator.push({ screen: "App.FullView", passProps: JSON.parse(JSON.stringify(this.state.data) } });
...