React Native+Expo项目中useState解构报错问题求助

这个报错的核心原因是useState未返回预期的可迭代数组，通常由以下场景导致，对应修复方案如下：

1. 检查React版本是否支持Hooks #

React Hooks（包括useState）从React 16.8.0版本起才被支持，如果项目依赖的React版本低于该版本，useState会未被正确定义，解构时就会抛出该错误。

修复操作：
在项目根目录执行命令更新依赖：

npm install react@latest react-native@latest
# 或使用yarn
yarn add react@latest react-native@latest

2. 修正TypeScript泛型写法 #

代码中使用的useState<String>存在类型写法问题：TypeScript中应使用小写的string基本类型，而非大写的String包装对象类型。虽然这不是直接报错原因，但部分环境下可能引发类型解析异常，间接影响useState正常工作。

修复写法：

const [title, onChangeTitle] = useState<string>('Useless Text');
const [description, onChangeDescription] = useState<string>('Useless Text');
const [location, onChangeLocation] = useState<string>('Useless Text');

3. 确认useState导入方式正确 #

必须从react中解构导入useState，避免默认导入或错误路径：

// 正确写法
import React, { useState } from 'react';

// 错误写法（会导致useState非预期Hook函数）
import useState from 'react';

修正后的完整代码 #

import React, { useState } from 'react';
import { StyleSheet, Text, TextInput, View } from 'react-native';
import { Link } from 'expo-router';

export default function AddPartyPage() {
    const [title, onChangeTitle] = useState<string>('Useless Text');
    const [description, onChangeDescription] = useState<string>('Useless Text');
    const [location, onChangeLocation] = useState<string>('Useless Text');
    
    return (
        <View>
            <Link href={{ pathname: "/" }}>Back</Link>
            <View style={styles.textField}>
                <Text style={styles.text}>Name: </Text>
                <TextInput 
                    style={styles.input} 
                    onChangeText={onChangeTitle} 
                    value={title} 
                />
            </View>
            <View style={styles.textField}>
                <Text style={styles.text}>Description: </Text>
                <TextInput 
                    style={styles.input} 
                    onChangeText={onChangeDescription} 
                    value={description} 
                />
            </View>
            <View style={styles.textField}>
                <Text style={styles.text}>Location: </Text>
                <TextInput 
                    style={styles.input} 
                    onChangeText={onChangeLocation} 
                    value={location} 
                />
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    textField: {
        flexDirection: 'row',
    },
    text: {
        height: 40,
        width: 100
    },
    input: {
        height: 40,
        margin: 5,
        borderWidth: 1,
        padding: 10,
    },
});

注：代码中onChangeText={(text) => onChangeTitle(text)}可简化为onChangeText={onChangeTitle}，参数直接传递的场景下写法更简洁。

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