如何在按钮点击时显示json中数组中的项到react native模态

Question

我有一个存储在JSON文件中的数据数组。它有ID，标题和描述。现在我已经在我的ReactNative应用程序中列出了标题。我想在一个模态上显示每个标题的内容。我该怎么做呢?

下面是我的代码，模态将出现，但描述不会出现在模态上。相反，它给出一个没有定义的错误。

import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
Modal,
Platform,
SafeAreaView,
ScrollView,
StyleSheet,
Text,
View,
} from "react-native";
export default function App() {
const data = require("./dummyData.json");
let modalData = [];
const [showStanzas, SetshowStanzas] = useState(false);
const onpressHandler = function (a, b) {
modalData = data[b];
SetshowStanzas(true);
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.headingView}>
<Text style={styles.heading}></Text>
</View>
<ScrollView>
<View style={styles.container2}>
<View style={styles.container3}>
{data.map((datas, id) => {
return (
<View key={id}>
<Text
style={styles.hymnTitle}
onPress={() => {
onpressHandler(true, id);
}}
>
{datas.id}. {""}
{datas.title}{" "}
</Text>
</View>
);
})}
<Modal
animationType={"slide"}
visible={showStanzas}
onRequestClose={() => SetshowStanzas(false)}
>
<View>
<Text style={styles.desc}> {modalData.description} </Text>
</View>
</Modal>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}

Answer 1

将本地变量modalData迁移到React状态

const [mobileData, setMobileData] = useState();

然后将所选索引数据存储在ononpressHandler

const onpressHandler = function (a, b) {
setMobileData(data[b]);
SetshowStanzas(true);
};

你的模态代码应该在之后工作