React Native 提交时呈现结果以原生方式响应

gfttwv5a 于 2022-11-25 发布在 React

关注(0)|答案(1)|浏览(137)

我想把当前登录到控制台中的内容呈现到一个单独的jsx文本元素中，但是我遇到了麻烦。

const handleSubmit = async () => {
    const response = await fetch(
      `http://127.0.0.1:5000/GetRecipes/${searchText}`,
      {
        method: "GET",
      }
    );
    const result = await response.json();
    const recipes = result["recs"];
    for (var meal in recipes) {
      if (recipes.hasOwnProperty(meal)) {
        console.log(recipes[meal].meal); // want to display this
        setSubmitPressed(submitPressed);
      }
    }
    // want to render the results in text elements
    const Test = () => {
      return <Text>hi</Text>;
    };

    const DisplayRecipes = ({ recipes }) => {
      return (
        <View>
          <Text>Meals</Text>
          {recipes.map((ing) => (
            <View key={ing[meal].meal}>
              <Text>{ing[meal].meal}</Text>
            </View>
          ))}
        </View>
      );
    };
  };

只有在用户从文本输入字段提交输入并获取结果后，才应显示结果。
HandleSubmit是在按钮的onPress属性中调用的。
参考数据如下所示{0，{"餐"："鸡翅"}}，{1，{"餐"："汉堡包"}}

react-native

来源：https://stackoverflow.com/questions/74542073/render-results-on-submit-react-native

1条答案

按热度按时间

nuypyhwy1#

请查看以下代码：

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {

   const recipes = [
  {
    "id": 0,
    "meal": "ChickenWings"
  },
  {
    "id": 1,
    "meal": "Hamburger"
  }
]

  return (
    <View style={styles.container}>
          <Text>Meals</Text>
          {recipes.map((ing) => (
            <View key={ing.id}>
              <Text>{ing.meal}</Text>
            </View>
          ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

您可以根据需要设置您的数据。

赞(0）回复(0）举报 2022-11-25

我来回答

React Native 提交时呈现结果以原生方式响应

1条答案

相关问题

热门标签

最新问答