Question

我是RN开发的新手，面临以下问题：当我用Expo创建RN项目时，我删除了屏幕上的所有内容并添加了必要的组件。因此，我有一个TextInput，应该将数据添加到变量中。因此，这就是我在状态this.state = {text: ''};中创建属性的原因，该属性将保留此数据。但是，当我运行项目时，出现以下错误：undefined is not an object。这是我的屏幕代码：

export default function HomeScreen() {

    this.state = {text: ''};

    return (

        <View style={styles.container}>
            <ScrollView
                style={styles.scrollViewContainer}
                contentContainerStyle={styles.contentContainer}>
                <View style={styles.searchContainer}>

                    <TextInput
                        placeHolder="Type something!"
                        onChangeText={(text) => this.setState({text})}
                        value={this.state.text}
                    />

                </View>

                <View>

                    <Button
                        onPress={Alert.alert("Button pressed!")}
                        title="Search"
                    />

                </View>

                <View style={styles.listContainer}>

                    <Text>{this.state.text}</Text>

                </View>

            </ScrollView>


        </View>
    )
        ;
}

因此，也许这个问题很愚蠢，但请解释一下问题所在以及如何解决此问题。也许代码中还有其他时刻需要更改？

Answer 1

仅使用this.state = {}代替state= {text: ''}

更多信息：https://www.robinwieruch.de/react-state-without-constructor/

Answer 2

onPress 应调用一个函数。尝试这种方式：

<Button
  onPress={() => Alert.alert("Button pressed!")}
  title="Search"
/>

Handling Touches docs:

中解释了相同的示例

希望有帮助，

Answer 3

如果您使用功能组件，则绝对应该使用Hooks而不是state对象，但是当您使用Expo时，我猜想使用的React和React Native版本太旧而无法启用Hooks

将您的组件更改为类组件，因此在构造函数中，您可以拥有一个状态对象，并在您的render方法中使用它

从Expo项目中的TextInput获取文本时，undefined不是对象

3 个答案: