REECT本机:SetState触发了Tab Navigator中不需要的选项卡更改

Question

我的代码没有任何意义。我正在使用React Native创建一个应用程序。在该应用程序中，我使用的是标签导航器。它可以正常工作，直到我调用此setstate，这是由于某种原因触发不需要的标签从一个选项卡更改为另一个选项卡。

为什么setState会触发标签更改？

这是我的代码：

import React from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, StatusBar, Button } from 'react-native';
import { TabNavigator } from 'react-navigation';
import { Constants } from 'expo'
import { purple, white } from './utils/colors'

const R = require('ramda')

function CustomStatusBar({ backgroundColor, ...props }){
  return (
    <View style={{backgroundColor, height: Constants.statusBarHeight}}>
      <StatusBar translucent backgroundColor={backgroundColor} {...props} />
    </View>
  )
}

export default class App extends React.Component {
  constructor(props){
    super(props)
    this.handleDeckTitle = this.handleDeckTitle.bind(this)
  }
  state = {
    title: ''
  }
  renderItem = (sample) => {
    console.log('renderItem', sample)
    return <Text>SAMPLE DATA</Text>
  }
  handleDeckTitle(e){
    console.log('handleDeckTitle')
    console.log('e', e)
    console.log('this.state', this.state)
    this.setState((prevState, props) => ({
      title: e
    }));
  }

  submitDeckTitle(){
    console.log('submitDeckTitle')

  }
  render() {
    console.log('R', R)

    const Decks = () => {
      return (
        <View>
          <CustomStatusBar backgroundColor={purple} barStyle='light-content' />
          <Text>Decks!</Text>
        </View>
      )
    }

    const NewDeck = () => {

      return (
        <View>
          <CustomStatusBar backgroundColor={purple} barStyle='light-content' />
          <Text>What is the title of your new deck?</Text>
          <TextInput style = {styles.input} onChangeText={this.handleDeckTitle}/>
          <Button onPress={this.submitDeckTitle} title="Submit" />
        </View>
      )
    }
    const Tabs = TabNavigator({
      Decks: {
        screen: Decks
      },
      'New Deck': {
        screen: NewDeck
      },
    });
    return (
      <Tabs />
    );
  }
}
const styles = StyleSheet.create({
  container: {
    paddingTop: 23,
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },
});

我看不到此代码有什么问题。实际上，我认为它应该只是正常工作，但行不通。当我调用thernledecktitle时，它会触发一个标签更改，然后称此为此。

现在就可以工作。

我更改了将SetState称为具有自己状态的单独组件的部分。

这是代码：

import React from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, StatusBar, Button } from 'react-native';
import { TabNavigator } from 'react-navigation';
import { Constants } from 'expo'
import { purple, white } from './utils/colors'

const R = require('ramda')

function CustomStatusBar({ backgroundColor, ...props }){
  return (
    <View style={{backgroundColor, height: Constants.statusBarHeight}}>
      <StatusBar translucent backgroundColor={backgroundColor} {...props} />
    </View>
  )
}

const Decks = () => {
  return (
    <View>
      <CustomStatusBar backgroundColor={purple} barStyle='light-content' />
      <Text>Decks!</Text>
    </View>
  )
}


class NewDeck extends React.Component {
  constructor(props){
    super(props)
    this.handleDeckTitle = this.handleDeckTitle.bind(this)
  }
  state = {
    title: ''
  }
  handleDeckTitle(e){
    console.log('handleDeckTitle')
    console.log('e', e)
    console.log('this.state', this.state)
    this.setState((prevState, props) => ({
      title: e
    }));
  }
  render(){
    return (
          <View>
            <CustomStatusBar backgroundColor={purple} barStyle='light-content' />
            <Text>What is the title of your new deck?</Text>
            <TextInput style = {styles.input} onChangeText={this.handleDeckTitle}/>
            <Button onPress={this.submitDeckTitle} title="Submit" />
          </View>
        )
  }
}

const Tabs = TabNavigator({
  Decks: {
    screen: Decks
  },
  'New Deck': {
    screen: NewDeck
  },
});

export default class App extends React.Component {
  constructor(props){
    super(props)
    // this.handleDeckTitle = this.handleDeckTitle.bind(this)
  }
  state = {
    title: ''
  }
  renderItem = (sample) => {
    console.log('renderItem', sample)
    return <Text>SAMPLE DATA</Text>
  }


  submitDeckTitle(){
    console.log('submitDeckTitle')

  }
  render() {
    console.log('R', R)

    return (
      <Tabs />
    );
  }
}
const styles = StyleSheet.create({
  container: {
    paddingTop: 23,
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },
});