如何将数据从 Class 传递到 React Native 数组、firebase、stack navigator v5 中的函数

Question

嘿，我正在努力研究如何将 class 中的数据传递给另一个 React 本机组件。我能够在同一屏幕上显示数据，但是我想让用户输入一些文本并将其显示在另一个屏幕上。

1) 初始屏幕：用户按下按钮导航到文本输入，然后将导航回到该屏幕以查看列表。注意：如果我在此处添加列表，则会出现错误“undefined is not an object”。因为我无法弄清楚如何将 LISTARRAY 变量传递到该屏幕。

export const GoalsScreen = ({ navigation }) => {

    return (
        <SafeAreaView style={styles.container}>
            <Header>
                {/* header title */}
                <Text style={styles.goalText}> Expand your life</Text>

                {/* add goal button goto stack */}
                <TouchableOpacity onPress={() => navigation.navigate("AddGoal")} >
                    <Text style={styles.addBtn}> + </Text>
                </TouchableOpacity>
            </Header>

            {/* Error here, need to get data from other screen */}
            <FlatList
                data={this.state.listArray}
                renderItem={({ item, index }) => {
                    return (
                        <View>
                            <Text style={{ fontSize: 30 }}>{item.fireListGoal} </Text>
                            <Text style={{ fontSize: 20 }}>{item.fireListCat}</Text>
                            <Text style={{ fontSize: 15 }}> {item.fireListWhy}</Text>
                        </View>
                    );
                }}
            >
            </FlatList>

        </SafeAreaView>
    );
}

2) 列表屏幕：如果我将 flatList 放在这里，一切正常，但我需要将此处输入的数据传递到 firebase 实时数据库中，并将其显示在上面显示的另一个屏幕上。



export class AddGoalList extends React.Component {

    // state and defult values
    constructor(props) {
        super(props)

        // set inital values
        this.state = {
            listArray: [],
            goal: '',
            category: 'Pick One',
            why: '',
        }
    }

    //triggers rerendering, put values in a JSON array
    componentDidMount() {
        goalsRef.on('value', (childSnapshot) => {
            const listArray = [];
            childSnapshot.forEach((doc) => {
                listArray.push({
                    key: doc.key,
                    fireListGoal: doc.toJSON().fireListGoal,
                    fireListCat: doc.toJSON().fireListCat,
                    fireListWhy: doc.toJSON().fireListWhy
                });
                this.setState({
                    listArray: listArray.sort((a, b) => {
                        return (
                            a.fireListGoal < b.fireListGoal,
                            a.fireListCat < b.fireListCat,
                            a.fireListWhy < b.fireListWhy
                        );

                    }),
                });
            });
        });
    }



    // when button pressed... 
    onGoal = ({ }) => {
        // if form empty alert user
        if (this.state.goal.trim() && this.state.why.trim() === '') {
            alert("Please fill form.");
            return;
        }
        if (this.state.category.valueOf() === 'Pick One') {
            alert("Fill in all inputs.");
            return;
        }
        // otherwise push data to firebase
        goalsRef.push({
            fireListGoal: this.state.goal,
            fireListCat: this.state.category,
            fireListWhy: this.state.why
        });
    }

    render() {

        return (
            // KeyboardAvoidingView ==> prevent keyboard from overlapping
            <KeyboardAvoidingView style={styles.container}>
                <SafeAreaView>
                    <Text>Sparks your life!</Text>

                    {/* Goal title */}
                    <Text>What is your goal</Text>

                    <TextInput
                        placeholder="Enter your goal"
                        keyboardType='default'
                        onChangeText={
                            (text) => {
                                this.setState({ goal: text });
                            }
                        }
                        value={this.state.goal}
                    />

                    {/* pick selected cetegory */}
                    <Text>Pick a Category</Text>
                    {/* picker component */}
                    <Picker
                        selectedValue={this.state.category}
                        onValueChange={(itemValue) => this.setState({ category: itemValue })}
                    >
                        <Picker.Item label="Pick One" value="Pick One" />
                        <Picker.Item label="Fitness" value="Fitness" />
                        <Picker.Item label="Health" value="Health" />
                        <Picker.Item label="Travel" value="Travel" />
                        <Picker.Item label="Wealth" value="Wealth" />
                        <Picker.Item label="Creativity" value="Creativity" />
                        <Picker.Item label="Skills" value="Skills" />

                    </Picker>

                    <Text>Why did you pick this goal?</Text>

                    <TextInput
                        placeholder="Enter your why"
                        keyboardType='default'
                        onChangeText={
                            (text) => {
                                this.setState({ why: text });
                            }
                        }
                        value={this.state.why}
                    />

                    {/* nav back to My Goal list */}
                    <Button title="add goal" onPress={this.onGoal.bind(this)} />
                </SafeAreaView>

                {/* remove list here and add to other GoalsScreen */}
                <FlatList
                    data={this.state.listArray}
                    renderItem={({ item, index }) => {
                        return (
                            <View> 
                                <Text style={{fontSize: 30}}>{item.fireListGoal} </Text>
                                <Text style={{fontSize: 20}}>{item.fireListCat}</Text>
                                <Text style={{fontSize: 15}}> {item.fireListWhy}</Text>
                            </View>
                        );
                    }}
                >
                </FlatList> 



            </KeyboardAvoidingView>

        );
    }
}

我尝试使用状态并将数据作为参数传递，但出现错误，无法在 class.. 中使用变量导航？还试图将它放在一个单独的函数中，现在它确实可以工作了。我将在下面添加我的代码，以便您查看。任何建议和/或对任何有用文档的引用都将不胜感激。

非常感谢您的帮助，过去几天一直在尝试解决此问题，但没有成功。非常感谢！

Answer 1

如果我理解正确的话，你想要的是：最初，您有一个带有项目列表的第一个屏幕 (GoalsScreen)。用户可以从那里打开一个新屏幕，他可以在其中添加项目 (AddGoalScreen)。因此，当用户返回时，您希望他看到更新后的列表。

首先，在上面的代码中，GoalsSrceen没有定义任何state listArray，所以会出现未定义的错误。您需要像在 AddGoalScreen 中那样声明它。此外，如我所见，AddGoalScreen 将不再显示此 listArray，因此您只需移动 GoalsScreen 中的 goalsRef.on('value', ... 订阅即可。这样做，每次您通过 AddGoalScreen 推送到 firebase 时，on('value') 订阅将在 GoalsScreen 内触发，并且 GoalsScreen 将重新呈现，保持其状态可用。所以你的问题已经解决了

如何将数据从 Class 传递到 React Native 数组、firebase、stack navigator v5 中的函数

How to pass data from Class to function in React Native array, firebase, stack navigator v5

javascript

firebase

react-native

react-native-ios

react-native-flatlist