Question

我的代码对某些事情没有意义。我正在使用React Native来创建一个应用程序。在那个应用程序中，我正在使用Tab Navigator。它工作正常，直到我调用this.setState，由于某种原因，它会触发从一个选项卡到另一个选项卡的不需要的Tab更改。

为什么setState会触发Tab更改??

这是我的代码：

  $sql = "INSERT INTO videos (file_name, upload_by, date, path) VALUES ('$newstring', '$id', '
          $date', 'Nominator/$location$newstring')";
  mysqli_query($mysqli, $sql);

我不知道这段代码有什么问题。事实上，我认为它应该正常工作，但事实并非如此。当我调用handleDeckTitle然后调用this.setState

时，它会触发一个标签更改

Answer 1

现在就开始工作了。

我将调用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
   },
});

React Native：setState在Tab Navigator中触发不需要的Tab更改

1 个答案: