ReferenceError, потому что переменная не передается

Question

В моем собственном родном приложении у меня есть ProductScreen, где два файла импортируются для завершения экрана.

Файл 1 (Products.js) - это список моих продуктов

Файл 2 (Data.js) - это мой файл данных (только временный)

 import Products from '../../components/Products';
 import { shoes} from '../../Data';

---

В моем ProdcutScreen я использую импортированный Products как component и устанавливаю значение products вshoes

<Products products={shoes} onPress={this.props.addItemToCart}/>

---

Затем в файле Product.js я пытаюсь установить state моего списка товаров на товары (которые при вызове в ProdcutScreen устанавливаются на * 1024).*)

state = {
    products, 
    filteredProducts: products,
  };

---

Здесь возникает проблема , потому что я получаю сообщение об ошибке

ReferenceError: ReferenceError: ReferenceError: ReferenceError: Can't find variable: products

Проблема возникает из строки 16 вфайл Products.js, который является

state = {
        products, 
        filteredProducts: products,
      };

Так что, похоже, значение shoes, полученное из файла Data.js, не передается в состояние.

---

Мой Вопрос Как я могу передать это значение?

Список работает, когда я не устанавливаю state и просто отображаю список следующим образом

{this.renderProducts(this.props.products)}

Но мне нужно установить состояние, потому что я хочу иметь возможностьОтфильтровать мои продукты.

---

ProductScreen.js

 import { drinks } from '../../Data';
 import { connect } from 'react-redux';

export  class ProductScreen extends React.Component {
    static navigationOptions = {
        headerTitle: 'shoes'
}




      render() {
        return (

            <View style={styles.container}>
                <Products products={shoes} onPress={this.props.addItemToCart}/> 
                <View >
                    {/* <TouchableOpacity style={styles.checkOutContainer} onPress={() => this.props.onPress(item)} > 
                        <Icon style={styles.checkmark} name="ios-checkmark" color="white" size={35} />
                    </TouchableOpacity> */}
                </View>
            </View>

        )
      }
    }

---

Data.js

export const shoes= [
    {
        id: 1,
        name: 'Hurrace',
        brand: 'Nike',
        type: 'strong',
        price: 7,
    },
]

---

Products.js

class Products extends Component {

    state = {
        products, 
        filteredProducts: products,
      };

      setSearchText(event) {
        const searchText = event.nativeEvent.text;

        const textLength = this.state.products.length;

        const filteredTexts = this.state.products.filter(row => {
          return row.name.indexOf(searchText) !== -1;
        });
        console.log("text: " + JSON.stringify(filteredTexts));

        this.setState({
          searchText,
          filteredProducts: filteredTexts
        });
      }

    renderProducts = (products) => {
        console.log(products)

        return products.map((item, index) => {
            return (
                <View key={index} style={styles.shoes}>

                    <View style={styles.text}>
                        <Text style={styles.name}>
                            {item.name}
                        </Text>

                        <Text style={styles.price}>
                        € {item.price}
                        </Text>
                    </View>
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity onPress={() => this.props.onPress(item)} > 
                        <Icon style={styles.button} name="ios-add" color="white" size={25} />
                        </TouchableOpacity>
                    </View>
                </View>
            )
        })
    }

---

Я все еще учусь реагировать на язык, начатый несколько месяцев назад.

Answer 1

Вы не можете использовать свойства экземпляра, если намереваетесь использовать реквизиты в качестве начальных значений.Вам нужно сделать это через конструктор (где вы проходите в реквизитах):

class Products extends Component {
    constructor(props) {
        super(props);
        const { products } = this.props;
        this.state = {
            products, 
            filteredProducts: products,
        };
    }
    ...