插入 JSON object 的文本数组<text>通过 forEach/map 的元素不在 React Native 中呈现</text>

Question

I'm making a Choose Your Own Adventure style game in React Native to learn how everything works. I figured it makes sense to keep the story in a separate JSON file and render it on one screen that updates depending on what arc the user is in.

Problem: when I write a forEach or map or other function to go through the array of paragraphs, the part of the screen it's supposed to be on is blank. Text from other parts of the return area displays fine, but what is supposed to be displayed from the forEach does not. Here's my code:

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

In case you're wondering the structure of the JSON file and its contents, I'm using this one to test with: https://github.com/gophercises/cyoa/blob/master/gopher.json

I've tried using map instead, tried putting things in Views, tried putting the forEach/map functions directly into the return section of the code, tried console.log-ing to confirm that my functions are working properly (which they appear to be), and... yeah, I'm at a loss.

Any suggestions?

Answer 1

Consider using map instead of forEach .

Full Working Example: Expo Snack

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

import { Card } from 'react-native-paper';

const StoryDisplayScreen = (props) => {
  const theStory = require('./data/TestStory.json');
  const theArc = 'intro';

  const storyText = () => {
    return theStory[theArc].story.map((paragraph, i) => (
      <Card style={{margin: 5, padding:5}}>
        <Text style={styles.body}>{paragraph}</Text>
      </Card>
    ));
  };

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

export default StoryDisplayScreen;
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Answer 2

firstly, if you want your sort is a function, it must return something, just like the render method

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

}
 

you also can make the sort is a view, use it as a variable. like that, both they are can works.

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

but the sort must have something return. your way use for each and map dont return any. there are two ways can do that.

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

the second way is to return directly a array

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

for more about the array operate to see the doc