如何在React Native中自定义异步GET请求并格式化返回名称列表

问题分析 #

你当前的代码直接将接口返回的纯文本存入state，但未正确处理换行符兼容性和内容拼接，导致split('\n')失效（可能是接口返回的是\r\n格式的换行符）。

解决方案 #

方案1：处理纯文本并拼接成带换行的字符串 #

修改onLoad函数，兼容不同换行符，过滤空行后拼接前缀和每个名称：

state = {
    results: '',
};

onLoad = async () => {
    this.setState({ results: 'Loading, please wait...' });
    try {
        const response = await fetch('url', { method: 'GET' });
        const rawText = await response.text();
        // 兼容Windows(\r\n)和Unix(\n)换行符，过滤空字符串
        const names = rawText.split(/\r?\n/).filter(name => name.trim() !== '');
        // 拼接前缀和每个名称（每个名称单独一行）
        const displayContent = `The people's names are...\n${names.join('\n')}`;
        this.setState({ results: displayContent });
    } catch (error) {
        this.setState({ results: 'Failed to load names.' });
    }
}

渲染时直接用Text组件即可，React Native的Text会识别\n并换行：

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

方案2：拆分名称数组，灵活渲染（推荐） #

将名称存为数组，渲染时逐个处理，方便添加样式或自定义格式：

state = {
    loading: true,
    names: [],
    errorMsg: '',
};

onLoad = async () => {
    this.setState({ loading: true, errorMsg: '' });
    try {
        const response = await fetch('url', { method: 'GET' });
        const rawText = await response.text();
        const names = rawText.split(/\r?\n/).filter(name => name.trim() !== '');
        this.setState({ loading: false, names });
    } catch (error) {
        this.setState({ loading: false, errorMsg: 'Failed to load names.' });
    }
}

渲染部分：

{this.state.loading ? (
    <Text>Loading, please wait...</Text>
) : this.state.errorMsg ? (
    <Text>{this.state.errorMsg}</Text>
) : (
    <Text>
        The people's names are...
        {this.state.names.map((name, idx) => (
            <Text key={idx}>\n- {name}</Text>
        ))}
    </Text>
)}

关键说明 #

• 使用split(/\r?\n/)替代split('\n')，兼容不同操作系统的换行符格式；
• filter(name => name.trim() !== '')过滤掉空行或空白名称，避免显示多余空行；
• 添加try-catch捕获请求异常，提升用户体验。

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