React Native提交后渲染接口返回数据问题求助

核心问题是你没用到React的状态管理——React组件要渲染动态数据，必须通过状态更新来触发重渲染，你之前在handleSubmit里直接定义组件根本不会生效。下面是完整的实现方案：

步骤说明 #

1. 用useState钩子定义两个状态：一个存输入框内容，一个存接口返回的meal列表
2. 修改handleSubmit函数，获取接口数据后处理成数组格式，再更新meal状态
3. 在JSX部分遍历meal状态数组，生成对应的Text元素

完整代码示例 #

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

export default function MealScreen() {
  // 初始化输入框状态和meal列表状态
  const [inputText, setInputText] = useState('');
  const [meals, setMeals] = useState([]);

  const handleSubmit = async () => {
    try {
      // 替换成你的实际接口地址，记得带上输入参数
      const response = await fetch(`https://your-api-url.com?query=${inputText}`);
      const data = await response.json();
      
      // 把接口返回的对象转成数组，提取每个item的meal字段
      const mealList = Object.values(data).map(item => item.meal);
      
      // 更新状态，触发组件重渲染
      setMeals(mealList);
    } catch (error) {
      console.error('请求失败:', error);
    }
  };

  return (
    <View style={{ padding: 20, flex: 1 }}>
      <TextInput
        style={{ borderWidth: 1, borderColor: '#ddd', padding: 12, borderRadius: 4, marginBottom: 16 }}
        placeholder="输入内容后提交"
        value={inputText}
        onChangeText={setInputText}
      />
      <Button title="获取餐食" onPress={handleSubmit} />
      
      {/* 渲染meal列表 */}
      <ScrollView style={{ marginTop: 20 }}>
        {meals.length > 0 ? (
          meals.map((meal, idx) => (
            <Text 
              key={idx} 
              style={{ fontSize: 18, paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: '#eee' }}
            >
              {meal}
            </Text>
          ))
        ) : (
          <Text style={{ color: '#666', textAlign: 'center', marginTop: 40 }}>
            还没有餐食数据，点击按钮获取
          </Text>
        )}
      </ScrollView>
    </View>
  );
}

关键细节解释 #

• 状态管理：useState是React用来管理组件内部动态数据的核心，当你调用setMeals更新状态时，React会自动重新渲染组件，把新的meal数据展示出来
• 数据处理：接口返回的是{0: {...}, 1: {...}}这种对象格式，用Object.values(data)可以把它转换成数组，再用map提取每个元素的meal字段
• key属性：遍历生成组件时必须加唯一的key，React靠它来识别每个元素的变化，这里用索引idx是临时方案，实际项目如果接口返回每个meal的唯一ID，用ID做key更好
• 错误处理：加上try/catch可以捕获请求过程中的错误，避免程序崩溃，同时在控制台打印错误信息方便调试

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