Javascript 插入到<；中的JSON对象的文本数组；文本>；通过forEach/map的元素未在React Native中渲染

我在React Native中制作了一个“选择你自己的冒险风格”游戏，以了解一切是如何运作的。我认为将故事保存在一个单独的JSON文件中并呈现在一个屏幕上是有意义的，该屏幕会根据用户所处的弧进行更新

问题：当我编写forEach、map或其他函数来遍历段落数组时，屏幕上应该显示的部分是空白的。返回区域其他部分的文本显示良好，但从forEach应该显示的文本显示不好。这是我的密码：

const StoryDisplayScreen = props => {
    const theStory = require('../data/TestStory.json')
    const theArc = 'intro'
    const storyText = () => {
        theStory[theArc].story.forEach((paragraph, i) => {
            <Text style={styles.body}>{paragraph}</Text>
        })
    }

    return (
        <View style={styles.screen}>
            <ScrollView>
                <View>
                    {storyText()}
                </View>
                <View style={styles.promptNextArcArea}>
                    <TouchableOpacity style={styles.promptNextArc}>
                        <Text style={styles.promptNextArcText}>What do you do?</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        </View>
    )
}

const故事显示屏=道具=>{
const theStory=require（“../data/TestStory.json”）
const theArc='intro'
常量故事文本=（）=>{
theStory[theArc].story.forEach（（段落，i）=>{
{段落}
})
}
返回(
{storyText（）}
你是做什么的？
)
}

如果您想知道JSON文件的结构及其内容，我将使用此文件测试：

我试着改用map，试着把东西放到视图中，试着把forEach/map函数直接放到代码的return部分，试着console.log-ing来确认我的函数是否正常工作（看起来是这样），还有。。。是的，我不知所措

---

有什么建议吗？

考虑使用

map

而不是

forEach

完整的工作示例：

import*as React from'React'；
进口{
文本，
看法
样式表，
滚动视图，
可触摸不透明度，
}从“反应本机”；
从“expo常量”导入常量；
从“react native paper”导入{Card}；
常量故事显示屏=（道具）=>{
const theStory=require（'./data/TestStory.json'）；
const theArc='intro'；
常量故事文本=（）=>{
返回故事[theArc].story.map（（段落，i）=>(
{段落}
));
};
返回(
{storyText（）}
你是做什么的？
);
};
导出默认故事显示屏幕；
const styles=StyleSheet.create({
屏幕：{
弹性：1，
paddingTop:Constants.statusBarHeight，
背景颜色：“#ecf0f1”，
填充：8，
},
});

首先，如果希望排序是一个函数，它必须返回一些东西，就像

render

方法一样

const sort = () => {
   return (<View></View>)

}
 

第二种方法是直接返回数组

const storyText = () => {
        //,first way,define a array, push it in the array
        let  storyViews= []
        storyViews = theStory[theArc].story.map((paragraph, i) => {
            return (<Text style={styles.body}>{paragraph}</Text>)
        })
        return soortView;
        
    }

conststorytext=（）=>{
//，第一种方法，定义一个数组，将其推入数组
让故事视图=[]
故事视图=故事[theArc].story.map（（段落，i）=>{
返回（{段落}）
})
返回soortView；
}

---

有关数组操作的更多信息，请查看

hi，有趣，可能会显示问题？请尝试

return

-

theStory[theArc].story.forEach（（段落，i）=>{return{paragration}}）

这确实有效。我注意到arrow函数使用了括号，而不是大括号。当我尝试使用大括号时，我遇到了没有显示的错误，但是当我使用括号括住箭头函数时，它工作得很好。你能帮我理解为什么吗？当使用大括号时，我们需要使用

return

语句，如果是括号，我们不需要它。

const storyText = () => {
        //,first way,define a array, push it in the array
        let  storyViews= []
        theStory[theArc].story.forEach((paragraph, i) => {
            sortyviews.push(<Text style={styles.body}>{paragraph}</Text>)
        })
        return soortView;
    }

const storyText = () => {
        //,first way,define a array, push it in the array
        let  storyViews= []
        storyViews = theStory[theArc].story.map((paragraph, i) => {
            return (<Text style={styles.body}>{paragraph}</Text>)
        })
        return soortView;
        
    }