类型错误：未定义不是对象（评估'_this3.state.bind'）

Question

App.js code:

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';



class HomeScreen extends React.Component {
  constructor(props){
    super(props);
    this.state={count:0};
    this.incrementCount=this.incrementCount.bind(this)
  }

  incrementCount(){
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={styles.homeScreen}>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => {
            this.incrementCount();
            this.props.navigation.navigate('Details');           
          }}
        />
      </View>
    );
  }
}

class DetailsScreen extends React.Component {

  constructor(props){
    super(props);
    this.state=this.state.bind(this)
    this.incrementCount=this.incrementCount.bind(this)
  }
  render() {
    return (

      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Hello </Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

const styles= StyleSheet.create({
    homeScreen:{

    }
});

export default createAppContainer(AppNavigator);

I wanted to increment a number (0), every time the user goes to the details(the second page) page. The incremented number should be displayed on the details(the second page) page.

I am a beginner in react native and I don't know how to use state in different classes. Do explain the concept of state along with the solution.

Answer 1

You have to send your count as prop to your DetailsPage . So in code it will look like this:

<Button
       title="Go to Details"
       onPress={() => {
            this.incrementCount();
            this.props.navigation.navigate('Details',{count:this.state.count});           
       }}/>

And in your DetailsScreen you have to access it like this:

class DetailsScreen extends React.Component {

  constructor(props){
    super(props);
    //Remove these lines this is causing error and this is wrong
    //this.state=this.state.bind(this)
    //this.incrementCount=this.incrementCount.bind(this)
  }
  render() {
    let count = this.props.navigation.getParam('count')
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>You were here {count} times </Text>
      </View>
    );
  }
}