在提交react native时呈现结果

Question

New to react native。我想渲染什么是目前正在登录到控制台到一个单独的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>
);
};
};

结果应该只在用户从文本输入字段提交输入并获取结果后显示。

handlessubmit在按钮的onPress prop中被调用。

参考数据看起来像这样{0,{"餐":"鸡翅"}},{1,{"餐":"汉堡包"}}

Answer 1

请查看下面的代码:

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,
},
});

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