Как передать значение в state c другой страницы?

Question

[Илья]

Для маршрутизации использую react-navigation.

Есть две страницы :
HomePage (основная страница).
HomePageList(основная станица только все элементы в виде списка)

Нужно сделать так:

Когда я нажимаю на элемент из списка на странице HomePageList. Должно передать значение в state на страницу HomePage.

Допустим я нажимаю на 12 элемент на странице HomePageList.
На HоmePage в state activeSlide должно передаться 12.

Comments

[Роман Александрович]

а давайте вы покажите ваш код для начала

[Илья]

Роман Александрович, У есть массив там 6 элементов.
На странице - HomePage. Сладйер с пагинацией . Index объекта сохраняется в state. В значение ActiveSlide.

На странице HomePageList все те же 6 элемент.Только списком и поиском.

Когда я нажимаю на какой-нибудь элемент HomePageList. Происходит _GoHome.

_GoHome = async ( ) => {
    this.props.navigation.navigate(HOMEPAGE);
  };

Как мне передать через функцию еще item.index в state HomePage.

Я пробовал сделать это так:

Сделать некую константу ActiveSlide в отдельном файле куда будет сохраняться item.index.

Потом в HomePage делать так:

if (ActiveSlide !== null){
      this.setState({
        activeSlide: ActiveSlide
      })
    }else{
      this.setState({
        activeSlide: 0
      })
    }

Но почему то так не работает пишет:

Error: ActiveSlide read only

[Роман Александрович]

Илья Краморов, вы можете передать в _GoHome необходимое вам число и с помощтю навигатора это число вытащить на HOMEPAGE.

HomePageList

_GoHome = async (index) => {
    this.props.navigation.navigate(HOMEPAGE,{index:index});
  };


HOMEPAGE

componentDidMount(){
console.log("index",this.props.navigation.state.params.index)
}

[Илья]

Роман Александрович, Спасибо за ответ у меня все получилось. Но есть один момент:

Как мне каждый раз по нажатию GoHome передавать это значение в state.

То есть сейчас оно у меня работает так:

setInterval(() => {
      this.ActiveSlide()
    }, 1000);

async ActiveSlide() {
    let value = await this.props.navigation.getParam("index");
    if (value !== undefined) {
      this.setState({
        activeSlide: value
      });
      this.props.navigation.state.params.index = undefined;
    }
  }

Дело в том что RN в консоли начинает ругать. Что нужно для таких дел использовать PureComponent. Для моего _renderItem (Объект в слайдере). Можно ли как то это обойти и сделать просто реагирование без setInterval?

[Роман Александрович]

Илья Краморов, вы можете вызывать ActiveSlide в ComponentWillRecieveProps(nextProps) и проверять если в  this.props.navigation ... значение отличается от значения в nextProps.nevigation .... и смотреть если значения в параметрах разное то вызывать свою функцию если одинаковое то ничего не делать э

[Илья]

Роман Александрович, По какой- то причине он сохараняет новый индекс конкретно через раз.

console.log(ActiveSlide)

undefined - > Нажимаю на первый элемент. state.ActiveSlide = undefined. Возвращаю на страницу HomeList.
0 -> Нажимаю опять на первый элемент. state.ActiveSlide = 0. Возвращаю на страницу HomeList.
0 - > Нажимаю на второй элемент. state.ActiveSlide = 0.Возвращаю на страницу HomeList.
1 -> Нажимаю опять на второй элемент. state.ActiveSlide = 1

И так с последующими.

[Илья]

Роман Александрович, Решил проблему вот этим способом:

this.props.navigation.push(HOMEPAGE,{
      index: index
    })

Но результат все ровно не тот.
Все теперь работает как-надо. Но страницу перезагружается полностью.
И каждый раз ActiveIndicator срабатывает.
А срабатывает он потому что каждый когда я нажимаю на _GoHome сбрасываются все state на HomePage.

[Роман Александрович]

setState фнкция ассинхронная и наверно вы не дожидаетесь ее окончания
Илья Краморов,

async ActiveSlide() {
    let value = await this.props.navigation.getParam("index");
    if (value !== undefined) {
     await  this.setState({  //вот тут изменения 
        activeSlide: value
      });
      this.props.navigation.state.params.index = undefined;
    }
  }

как отрабатывает этот кусок кода?

[Илья]

Роман Александрович, Все решена проблема. Благодарю за помощь!

[Илья]

Илья Краморов, с await'ами запутался.

Answer 1

[Роман Александрович]

async ActiveSlide() {
    let value = await this.props.navigation.getParam("index");
    if (value !== undefined) {
     await  this.setState({  //вот тут изменения 
        activeSlide: value
      });
      this.props.navigation.state.params.index = undefined;
    }
  }

Answer 2

[Nick]

Второй параметр у функции navigate позволяет передавать объект с параметрами. Более подробно с примером кода есть в официальной документации