反应原生为什么我的状态未定义

Question

我开始学习反应原生，有些事情我无法理解。这是我的文件：

import React from 'react';
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
import SaladsList from './SaladsList';
import salotos from '../Classes/Salads';
export default class SaladsContainer extends React.Component {
constructor(props) {
  super(props);
    this.state = { salads: salotos,
                   SaladsDisplayState: true
             };
    this.changeState = this.changeState.bind(this);
  }
   changeState() {
      /* if (this.state.SaladsDisplayState === false) {
       this.setState.SaladsDisplayState = true;
      } else if (this.state.saladsDisplayState === true) {
        this.setState.SaladsDisplayState = false;
      }
      console.log(this.state.saladsDisplayState);
      */
      console.log('Veikia funkcija');
      console.log(this.state.salads);
      }
    renderSaladsList() {
      if (this.state.SaladsDisplayState) {
    return this.state.salads.map(salad => <Text style={Styles.saladsText}>{salad.Name}</Text>);
  } else {
    return <TouchableOpacity onPress={this.changeState()}><Text style={Styles.saladsText}>Salotos</Text></TouchableOpacity>
  }
  }
  render() {
    console.log(this.state.SaladsDisplayState);
    return (
      <View style={Styles.saladsContainer}>
      {this.renderSaladsList()}
      </View>
    );
  }
}

1.为什么当我按下按钮时，没有定义 this.state.SaladsDisplayState？2.为什么在 Render（） 部分定义了沙拉显示状态？3.为什么我的这个.状态沙拉到处都有定义？

请帮助我，谢谢:)

Answer 1

当你想在 React Native 中调用一个函数/方法时，就像 TouchableOpacity 组件一样，你应该使用 onPress={() => this.changeState()} 或 onPress={this.changeState} 。如果你只是使用 onPress={this.changeState()} ，当组件预渲染时，当代码到达此行时，它将执行此代码。它不会等待您执行新闻！