React Native - 无法使用定义的状态

Question

此屏幕是从其他屏幕导航的。当此屏幕打开时，它将从 Webhost 数据库加载一些数据并将它们填充到视图控件中。在 Constructor(State) 中定义的变量很少，但是当程序试图调用ShowAll() 函数（单击显示按钮）以显示带有状态中已定义变量内容的警报消息时，程序会显示此错误。

错误：未定义不是对象（评估“this.state.RecipeName”）

export default class SecondActivity extends Component
{


   static navigationOptions = { title: 'View Details',};


constructor(props) {
   super(props)
     this.state={
       RecipeID : '',
       RecipeName : '',
       RecipeType : '',
       RecipeIngredient : '',
       RecipeStep : ''
     }
}

componentDidMount(){

fetch('https://unsurfaced-cross.000webhostapp.com/getRecipeDetailRN.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({

      // Getting the id.
      RecipeID: this.props.navigation.state.params.ListViewClickItemHolder

    })

  }).then((response) => response.json())
        .then((responseJson) => {

          this.setState({

            RecipeID : responseJson[0].RecipeID,
            RecipeName : responseJson[0].RecipeName,
            RecipeType : responseJson[0].RecipeType,
            RecipeIngredient : responseJson[0].RecipeIngredient,
            RecipeStep : responseJson[0].RecipeStep

          })

        }).catch((error) => {
          console.error(error);
        });

  }

  ShowAll(){
    Alert.alert(
     'Alert Title',
     this.state.RecipeName,  // **ERROR COME FROM THIS LINE**
     [
     {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
     {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
     {text: 'OK', onPress: () => console.log('OK Pressed')},
     ],
    { cancelable: false }
  )

}




render()
{

return(
   <View style = { styles.MainContainer }>

    <View style={{flex:1, flexDirection: 'column'}} >

     <Text style={styles.textViewContainer} > {'Recipe ID = ' + this.state.RecipeID} </Text>

     <Text style={styles.textViewContainer} > {'Recipe Name = '} </Text>

     <TextInput
       style={styles.textInput}
       onChangeText={(text) => this.setState({RecipeName: text})}
       value={this.state.RecipeName}
     />

     <Text style={styles.textViewContainer} > {'Recipe Type = '} </Text>



     <Picker
       style={{width: 200}}
       selectedValue={this.state.RecipeType}
       onValueChange={
         (itemValue, itemIndex) => {
           this.setState({RecipeType: itemValue, isLoading:true})
           this.componentDidMount()
           this.forceUpdate()
         }
       }>

                             <Picker.Item label="Vegetarian" value="Vegetarian" />
                             <Picker.Item label="Fast Food" value="Fast Food" />
                             <Picker.Item label="Healthy" value="Healthy" />
                             <Picker.Item label="No-Cook" value="No-Cook" />
                             <Picker.Item label="Make Ahead" value="Make Ahead" />

       </Picker>


     <Text style={styles.textViewContainer} > {'Ingredient = '} </Text>

     <TextInput
       style={styles.textInput}
       onChangeText={(text) => this.setState({RecipeIngredient: text})}
       value={this.state.RecipeIngredient}
     />

     <Text style={styles.textViewContainer} > {'Step = '} </Text>

     <TextInput
       style={styles.textInput}
       onChangeText={(text) => this.setState({RecipeStep: text})}
       value={this.state.RecipeStep}
     />


     <Button
         title="Show"
         onPress={this.ShowAll}
         color="#841584"
     />

    </View>

  </View>
);
}
}

RecipeName 变量已经在 Consturctor(State) 中定义，它也可以被 Views 使用/调用。但是当谈到ShowAll() 函数时，它变成了未定义。

当代码已经存在时，为什么/如何变得未定义？

Answer 1

渲染中的绑定

onChange={this.handleChange.bind(this)}

如果你使用 ES6 类并且你想在渲染中调用你的函数，React 不再自动绑定。解决此问题的一种方法是在渲染中调用绑定。但这种做法其实并不好。因为函数会在每次渲染时重新分配。所以，有几种方法可以做到这一点。

在渲染中使用箭头函数

这种方法类似于渲染方法中的绑定。您可以通过在渲染中使用箭头函数来避免更改 this 上下文：

onChange={e => this.handleChange(e)}

这是做同样事情的另一种方法，但在渲染中绑定的性能仍然相同。唯一的区别是您没有使用“this”。

在构造函数中绑定

避免在渲染中绑定的一种方法是在构造函数中绑定。

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
}

这是 React 文档中当前推荐的“在您的应用程序中获得更好性能”的方法。您只需绑定一次并在每次按下渲染内的按钮时使用。