不确定如何强制更新（）反应原生重新渲染

Question

我读到了使用forceUpdate的不良做法，但是我推送的数据存储在一个单独的数组js文件夹中。我已经阅读过将一个函数传递给子屏幕，然后在你执行goBack（我正在使用React Navigation）之前调用该函数。

我还是React的新手，所以关于这两个人的解释很少我无法理解。我还提供了一个存储所有内容的json数据数组示例。

所以我想做的是
屏幕1 - ＆gt; Screen2（表单）数据被推送到无状态数组 - ＆gt; Rerender Screen1

更新： 我刚想过将userData：userDate传递给父状态，但是我不确定如何将新表单数据推送到数组中并且如果是这样也更新状态

export var userData= [
  {
    'title': 'First Program',
    'description': 'This is the description for the first program',
    'workoutName':[
      {
        'workoutTitle': 'First Workout',
        'workoutDescription': 'This is empty',
        'exerciseList': []
      },
    ]
  }
 ] 

这是第一个屏幕------------------

import React from 'react';
import styles from '../../styling/style.js';
import { Text, View, Image, TouchableHighlight, ScrollView } from 'react-native';
import { List, ListItem } from 'react-native-elements';
// -------------------------------------------------
import { userData } from '../../config/data';
import Forms from '../FormPage';


export default class ProgramLists extends React.Component {
constructor(props) {
  super(props);
    this.state = {
      // These inputs will be used to link to program/workout/exercise titles and descriptions
      userData: userData
  };
}    
render() {
  // this.props.navigation.navigate is shorthanded into this below.
  // Be aware there are multiple NavigationActions that use this.props.navigation, so my not be used in all cases.
  const { navigate } = this.props.navigation;
  return (    
    <Image style={styles.workoutContainer, { flex: 1}} source={require("../../images/HomepageBackground.jpg")}>
    <View style={styles.workoutScrollView}>  
     <ScrollView>
        <List style={styles.listBody}>
          {this.state.userData.map((data, i) => (
            <ListItem titleStyle={{color: 'white'}} subtitleStyle={{color: 'black', fontSize: 12}} 
              key={i}
              title={`${data.title.toUpperCase()}`}
              subtitle={data.description}
              onPress={() => navigate('WorkoutList', {...data})}
            />
          ))}
        </List>
      </ScrollView>
      </View>
        <View style={styles.createButton}>
        <TouchableHighlight onPress={() => navigate('Form', {titlePassed: 'program'})} style={styles.addButtonTouch}>
        	<Text style={styles.addButtonText}>+</Text>
        </TouchableHighlight>
        </View>
    </Image>    
    );
  }

// End of the render
}

import React from 'react';
import styles from '../styling/style.js';
import { Text, View, Image, TouchableHighlight, TextInput } from 'react-native';
import { NavigationActions } from 'react-navigation'
// -------------------------------------------------
import { userData, specificExercises } from '../config/data';


export default class Forms extends React.Component {
constructor(props) {
  super(props);
    this.state = {
      // These inputs will be used to link to program/workout/exercise titles and descriptions
      InputTitle: '',
      InputDescription: '',
  };
}    
render() {
  return (    
    <Image style={styles.workoutContainer, { flex: 1}} source={require("../images/HomepageBackground.jpg")}>
      <View style={styles.workoutBody}>
        <Text style={styles.formHeader}><Text style={{fontWeight: 'bold'}}>Add a new </Text>{this.Textone()} </Text>
          <TextInput
            ref="input1"
            autoCorrect={false} 
            style={styles.formBody}
            onChangeText={(InputTitle) => this.setState({InputTitle})}
            placeholder='Title'
            value={this.state.InputTitle} />
        <Text style={styles.formHeader}><Text style={{fontWeight: 'bold'}}>Description</Text> {this.Texttwo()}</Text>
          <TextInput
            ref="input2"
            autoCorrect={false} 
            style={styles.formBody}
            placeholder='Description'
            onChangeText={(InputDescription) => this.setState({InputDescription})}
            value={this.state.InputDescription} />
        <TouchableHighlight onPress={() => this.Addprogram(this.state.InputTitle, this.state.InputDescription)} style={styles.buttonBody} title="Add Program" >
          <Text>Add Program</Text>
        </TouchableHighlight>  
      </View>
      <View>
      </View>
    </Image>    
    );
  }

Addprogram = (title, description) => {
  switch (this.props.navigation.state.params.titlePassed) {
    case 'program':
      userData.push({ 'title': title,
                      'description': description,
                      'workoutName':[]
                    });
      break;
    case 'workout': 
      alert(title);
      break;
    case 'exercise': 
      alert(title);
      break;
  }
  let backAction = NavigationActions.back()
  this.props.navigation.dispatch(backAction)
  return;
} 
}