如何将数据从类传递到 React Native 数组、firebase、堆栈导航器 v5 中的函数

Question

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

1) 初始屏幕：用户按下按钮导航到文本输入，然后导航回此屏幕以查看列表。 注意：如果我在此处添加列表，则会收到错误消息“未定义不是对象”。 因为我无法弄清楚如何将 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>

        );
    }
}

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

真的很感激一些帮助，过去几天一直在努力解决这个问题，但没有运气。 非常感谢！

Answer 1

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

首先，在上面的代码中，GoalsSrceen 没有定义任何状态 listArray，所以这就是你得到 undefined 错误的原因。 您需要像在 AddGoalScreen 中一样声明它。 另外，正如我所看到的，AddGoalScreen 将不再显示这个 listArray，所以你可以简单地移动目标goalsRef.on('value', ...在目标屏幕中订阅。这样做，每次你通过 AddGoalScreen 推送到 firebase 时, on('value')订阅将在目标屏幕内触发，目标屏幕将重新渲染，保持其状态可用。所以你的问题得到了解决