Компонент не показывает изменения после рендера в React Native - PullRequest
Новая
       33

Компонент не показывает изменения после рендера в React Native

0 голосов
/ 12 февраля 2020

Newb ie, чтобы Реагировать на Родной здесь. Я пытаюсь использовать Redux для мобильного приложения для React Native. Есть пара компонентов (экраны приложений). Я выбираю элемент с одного экрана (имеет список элементов) и предоставляю его следующему в качестве параметра, чтобы показать его детали. Когда я делаю это в первый раз, все правильно. Но если я выберу другой элемент на экране списка, второй экран не отображает правильные детали элемента. Вместо этого он показывает детали для ранее выбранного элемента.

Первый экран содержит элемент и перемещается: 

this.props.navigation.navigate('DetailsScreen', { item: item.value } );

Второй экран: 

class DetailsScreen extends Component{
  constructor(props) {
      super(props);
      this._item = this.props.navigation.getParam(‘item’);
  }

  componentDidMount() {
    this.props.dispatchData(this._item);
  }


  render(){
    return (
      <View>
        <SectionList
          sections={this.props.layout}
          stickySectionHeadersEnabled={false}
          renderItem={({item}) => (
              <ListItem
                title={item.title}
              />
          )}
          renderSectionHeader=
          {
            ({section}) => (
            <ListItem
                bottomDivider={true}
              />)
          }
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}


const mapStateToProps = state => {
  return {
    layout: state.detailsReducer.layout,
  };
};



  const mapDispatchToProps = {
    dispatchData:  (item) => getLayout(item)
  }

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

Странно то, что я вижу из журналов новый макет ( из вновь выбранного элемента), то есть функция render() в DetailsScreen вызывается с правильными актуальными данными. Но я не вижу этих изменений на экране. Что мне не хватает? Это из-за навигации сохраняет предыдущий экземпляр экрана? Или что-то еще?

1 Ответ

0 голосов
/ 12 февраля 2020

Это из-за того, что навигация сохраняет предыдущий экземпляр экрана? Или что-то другое?

ответ - да, реагируйте на навигацию, что он делает, если вы делаете navigation.navigate('home') для страницы, то в первый раз она отображается с каждым методом жизненного цикла, кроме второго. раз он не вызывает componentDidMount, так как он был взят из стека навигации. Что вы можете сделать, так это попробовать 

this.props.navigation.push('DetailsScreen', { item: item.value } );

. Он будет выводить sh экран на вершину стека при каждом вызове.

Надеюсь, это поможет не стесняться сомнений

...