Не обновляет состояние мгновенно - PullRequest
Новая
       28

Не обновляет состояние мгновенно

0 голосов
/ 26 сентября 2018

Итак, когда я нажимаю на кнопку «Добавить в корзину» на Screen2, она записывает articleToCart или корзину «Артикул» как пустой массив ... Только когда я возвращаюсь на Screen1 и затем снова на Screen2, снова нажимаю кнопку «Добавить в корзину».регистрирует массив cartArticle с одним элементом, даже если кнопка «Добавить в корзину» была нажата 2 раза ... Как я могу сделать так, чтобы при нажатии кнопки «Добавить в корзину» он немедленно обновлял состояние?Что я делаю неправильно?Я использую реагирующую навигацию v2.Можно ли установить минимальные и минимальные параметры с задержкой?

class Screen1 extends Component {
  state = {
    articles: {
      article: [],
    },
  cartArticle: []
};

articleToCart = () => {
this.setState(prevState => {
  return {
    cartArticle:  prevState.cartArticle.concat(prevState.articles.article)
    };
  });
};


qrCodeOnReadHandler = ({ data }) => {
fetch(data)
  .then(response => response.json())
  .then(json => [
    console.log(json),
    this.setState({
      ...this.state,
      articles: {
        ...this.state.articles,
        article: json[0],
      }
    }),
    this.props.navigation.navigate("Screen2", {
      addToCartOnPress: () => this.articleToCart(),
      articleToCart: this.state.cartArticle,
    })
  ])
  .catch(err => {
    alert("Nesto ne valja. Pokusajte ponovo!");
    console.log(err);
  });
 };

render() {
  return (

    );
  }
}

Второй экран 

class Screen2 extends Component {

addToCartHandler = () => {
   const { navigation } = this.props;
   const articleToCart =navigation.getParam("articleToCart","Nedostupno");
    const add = navigation.getParam("addToCartOnPress", "Nedostupno");

console.log(articleToCart);

add();

};

goBackHandler = () => {
   this.props.navigation.goBack();
  };

 render() {
   return (
        <View style={styles.buttons}>
          <CustomButton color="#1DA1F2" onPress={this.goBackHandler}>
            Back
          </CustomButton>

          <CustomButton color="#1DA1F2" onPress={this.addToCartHandler}>
            Add to Cart
          </CustomButton>
    );
  }
}

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

setState является асинхронным, вы не можете читать значения только после их установки .. но вы можете использовать setState callback, sth.как это: 

.then(json => {
  console.log(json)
  this.setState({
    ...this.state,
    articles: {
      ...this.state.articles,
      article: json[0],
    }
  }, () => {
    this.props.navigation.navigate("Screen2", {
      addToCartOnPress: () => this.articleToCart(),
      articleToCart: this.state.cartArticle,
    })
  })
})
0 голосов
/ 26 сентября 2018

в вашем qrCodeOnReadHandler на screen1: 

[
    console.log(json),
    this.setState({
      ...this.state,
      articles: {
        ...this.state.articles,
        article: json[0],
      }
    }),
    this.props.navigation.navigate("Screen2", {
      addToCartOnPress: () => this.articleToCart(),
      articleToCart: this.state.cartArticle,
    })
  ]

вы возвращаете массив с вашими функциями в качестве его индексов.вместо этого попробуйте изменить это. 

{
    console.log(json);
    this.setState({
      ...this.state,
      articles: {
        ...this.state.articles,
        article: json[0],
      }
    });
    this.props.navigation.navigate("Screen2", {
      addToCartOnPress: () => this.articleToCart(),
      articleToCart: this.state.cartArticle,
    })
}
...