Блог

Я пытаюсь создать приложение для списка желаний (для студентов, а не для реального), но когда я пытаюсь добавить элементы в массив списка желаний, кнопки не работают, они просто ничего не делают. Я полагаю, это потому, что я не могу обновить информационную составляющую.

это моя информация.ts

 import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'

import Product from '../models/products'
import { ProductItem,wlistitem } from './ProductItem'

export class Information extends Component {

    render() {
        return (
            <View style={styles.information}>
                <Text>YOU HAVE SELECTED {wlistitem.length}</Text>
            </View>  
        )
    }
}

export default Information

const styles = StyleSheet.create({
    /* */
  });
 

это мой компонент ProductItem, в котором я пытаюсь заставить кнопку работать.

 import React, { Component } from 'react'
import { StyleSheet, Text, View, Image, Button, Alert } from 'react-native'

import Product from '../models/products'
import Products from './Products'
import WishList from '../pages/WishList'

export var wlistitem : Product[] = []

export class ProductItem extends Component<Product> {  

  addNewWish() {
    const newItem: Product = {
      id: Date.now(),
      name: this.props.name,
      rating: this.props.rating,
      image:this.props.image,
    }

    const wList = [... wlistitem, newItem];

    wlistitem.push(newItem)
  }

  render() {
      const {image, name, rating } = this.props;

      return (
          <View style={styles.productsItems}>
            <Image
              style={styles.tinyLogo}
              source={{ 
                  uri: image,
              }}
            />
            <View style={styles.cardInfo}>
              <Text>{name}</Text>
              <Image
                style={styles.stars}
                source={{
                  uri: rating,
                }}                
              />
            </View>
            <View style={styles.buttonSection}>
              <Button
                color="#344d2f"
                title="Add"
                onPress={() => this.addNewWish()}
              />
            </View>            
          </View>
      )
  }
}

const styles = StyleSheet.create({
      /**/
})
 

это будет основной компонент списка желаний, который я привожу здесь только для того, чтобы у вас было общее представление о приложении:

 import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, Image, Button, Alert} from 'react-native';
import Constants from 'expo-constants';

import Banner from '../components/Banner'
import Products from '../components/Products'
import Information from '../components/Information'
import Product from '../models/products'

export default class WishList extends Component {
    products : Product[] = [{
        id: 1,
        image:'https://reactnative.dev/img/tiny_logo.png',
        name:'This must be a very large title',
        rating: 'https://www.wauwatosadentists.com/wp-content/uploads/2018/10/5-stars-png-no-background-4.png',
    },
    {   
        id: 2,
        image:'https://reactnative.dev/img/tiny_logo.png',
        name:'This must be a very large title2',
        rating: 'https://www.wauwatosadentists.com/wp-content/uploads/2018/10/5-stars-png-no-background-4.png',
    },
    {   id: 3,
        image:'https://reactnative.dev/img/tiny_logo.png',
        name:'This must be a very large title3',
        rating: 'https://www.wauwatosadentists.com/wp-content/uploads/2018/10/5-stars-png-no-background-4.png',
    },
    {   id: 4,
        image:'https://reactnative.dev/img/tiny_logo.png',
        name:'This must be a very large title4',
        rating: 'https://www.wauwatosadentists.com/wp-content/uploads/2018/10/5-stars-png-no-background-4.png',
    },
    {   id: 5,
        image:'https://reactnative.dev/img/tiny_logo.png',
        name:'This must be a very large title5',
        rating: 'https://www.wauwatosadentists.com/wp-content/uploads/2018/10/5-stars-png-no-background-4.png',
    }];

  render(){
    return (
      <View style={styles.container}>
        <Banner />

        <Products products={this.products} />

        <Information />
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      marginTop: Constants.statusBarHeight
    },
  });