React Native类组件中使用useState报错：'; expected'求解答

你的代码存在几个关键问题，直接导致了语法错误和逻辑问题，逐一说明：

• 钩子使用场景错误：useState是React函数组件专属的状态钩子，绝对不能在类组件内部直接使用。类组件需要通过this.state和this.setState()来管理状态。
• 导入语法错误：import React, {useState} from react; 中的react必须用引号包裹，正确写法是import React from 'react';（类组件不需要导入useState，可以直接删掉）。
• 组件漏导入：代码中用到了<Text>组件，但没有从react-native库中导入，必须在import语句中添加Text。
• 未定义变量：{textLabel}没有来源，类组件中应该通过this.props.textLabel获取父组件传入的属性值。

修复后的类组件版本 #

import { TextInput, View, Text } from "react-native";
import React from 'react'; 

class NumberField extends React.Component{
    constructor(props) {
        super(props);
        // 类组件初始化状态
        this.state = {
            data: ''
        };
    }

    render(){
        return (
            <View>
                <Text>{this.props.textLabel}</Text>
                <TextInput 
                    value={this.state.data}
                    onChangeText={(value) => this.setState({ data: value })}
                />
            </View>
        )
    }
}

更推荐的函数组件版本（React官方推荐写法） #

如果没有特殊需求，现在更建议用函数组件配合钩子来实现：

import { TextInput, View, Text } from "react-native";
import React, { useState } from 'react'; 

const NumberField = (props) => {
    // 函数组件中正常使用useState钩子
    const [data, setData] = useState('');

    return (
        <View>
            <Text>{props.textLabel}</Text>
            <TextInput 
                value={data}
                onChangeText={(value) => setData(value)}
            />
        </View>
    )
}

你之前看到的useState示例都是函数组件的写法，类组件的状态管理逻辑完全不同，这就是你参考示例却没解决问题的核心原因。

内容的提问来源于stack exchange，提问作者PLy