不立即更新状态

Question

所以，当我点击 Screen2 上的添加到购物车按钮时，它会将 articleToCart aka cartArticle 记录为空数组...只有当我返回 Screen1 并再次在 Screen2 上时，再次按下添加到购物车按钮即使单击了“添加到购物车”按钮 2 次，也将包含一个项目的 cartArticle 数组记录下来...我怎样才能使当我单击“添加到购物车”按钮时，它会立即更新状态？我究竟做错了什么？我正在使用反应导航 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>
    );
  }
}

Answer 1

在屏幕 1 上的 qrCodeOnReadHandler 中：

[
    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,
    })
}

Answer 2

setState 是异步的，设置后无法读取值 .. 但可以使用setState 回调，...像这样：

.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,
    })
  })
})