javascript - 从第二次获取结果

Question

我做错了什么？价格和文章在第一次二维码扫描时不会呈现，但从第二次、第三次开始......我猜测它与异步代码有关，但我看不到我需要做什么......有人可以帮助我吗请？提前告知!

export default class Qr extends Component {
  state = {    
    price: [],
    article: [],
  };

  qrCodeOnReadHandler = ({ data }) => {
    let price = this.state.price;
    let article = this.state.article;

  fetch(data)
    .then(response => response.json())
    .then(json => [
      console.log(json),
      article.push(json[0]),
      price.push(parseInt(json[4]))
    ]);

  console.log(price);
  console.log(article);
 };

render() {
    return (
      <View style={{ flex: 1 }}>
         <View style={styles.price}>
              <Text style={styles.text}>Proizvod: {this.state.article}</Text>
         </View>
         <View style={styles.price}>
              <Text style={styles.text}>Cena: {this.state.price}</Text>
         </View>
      </View>
    );
  }
}

Answer 1

您正在直接修改状态。那是不行的。您应该调用 setState 来代替

export default class Qr extends Component {
  state = {    
    price: [],
    article: [],
  };

  qrCodeOnReadHandler = ({ data }) => {

  fetch(data)
    .then(response => response.json())
    .then(json => [
      console.log(json),
      this.setState({
        article: [...this.state.article, json[0]],
        price: [...this.state.price, json[4]],
      })
    ]);
 };

render() {
    return (
      <View style={{ flex: 1 }}>
         <View style={styles.price}>
              <Text style={styles.text}>Proizvod: {this.state.article}</Text>
         </View>
         <View style={styles.price}>
              <Text style={styles.text}>Cena: {this.state.price}</Text>
         </View>
      </View>
    );
  }
}