Question

_this.setstate未在占位符值更改时定义

这是代码。组件

    import React from 'react'; 
    import {SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, 
    TextInput, Button } from 'react-native';
    import { Header, LearnMoreLinks, Colors, DebugInstructions, 
    ReloadInstructions} from 'react-native/Libraries/NewAppScreen';

    const App: () => React$Node = () => {   
       state = {
        placeName: 'dd',
        places: []   
      }   

      placeSubmitHandler = () => {
        if(this.state.placeName.trim() === ''){
          return
        }
        this.setState(preState => {
          return {
            places: preState.places.concat(preState.placeName)
          }
        })
      }   

     placeNameChangeHandler = val => {
        this.setState({
          placeName: val
        })}   

    const placesOutput = this.state.places.map(place => (
        <Text>{place}</Text>
    ))

   return (  
     <View style= {styles.containter}>
        <View style={styles.inputContainer}> 
            <TextInput 
               onChangeText={this.placeNameChangeHandler}  
               value={this.state.placeName} 
               style={styles.placeInput}
               placeholder="input here " 
            />
            <Button onPress={this.placeSubmitHandler} title="Add"/>
        </View>
        <View>
           {placesOutput}
        </View>   
     </View>
    )}

更新（可能的解决方案）

this在功能组件中不可用，因为这仅在类组件中可用所以不要在功能组件中使用

`

Answer 1

这是函数组件，而不是类组件，应该使用useState（）或将其转换为类组件试试这个`

import React,{useState} from 'react';
import {
     SafeAreaView,
     StyleSheet,
     ScrollView,
     View,
     Text,
     StatusBar,
     TextInput,
     Button
} from 'react-native';

import {
     Header,
     LearnMoreLinks,
     Colors,
     DebugInstructions,
     ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';


const App = ReactNode => {
    const [state, setState] = useState({
         placeName: 'dd',
         places: []
    })

     placeSubmitHandler = () => {
          if (state.placeName.trim() === '') {
               return
          }
          setState(preState => {
               return ({
                    places: preState.places.concat(preState.placeName)
               });
          })
     }
     placeNameChangeHandler = val => {
          setState({
               placeName: val
          })
     }
     const placesOutput = state.places.map(place => ({
          place
     }))
      return ({
          placesOutput
     })
}`

反应本机TypeError：_this.setState不是一个函数

1 个答案: