Question

我正在用Firebase后端编写一个反应Web应用程序。基于对一个文档的现场查询，我想访问另一个文档。

我只能返回查询并直接使用它来访问文档。它正在调用该函数并一遍又一遍地查询。

import React, { Component } from 'react';
import { compose } from 'recompose';
import { withAuthorization } from '../Session';
import { withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import './Image/1.jpeg'
import Album from './Album.js';

const styles = theme => ({
    root: {
        ...theme.mixins.gutters(),
        paddingTop: theme.spacing.unit * 2,
        paddingBottom: theme.spacing.unit * 2,
    },
});

class ChildPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            items: [],
        };
        this.classes = props;
    }

    componentDidMount() {
        this.setState({ loading: true });

        let query = [];
        this.unsub = this.props.firebase.users().doc(this.props.firebase.userId()).get().then(doc => {
            query.push(doc.data().LinkedUsername)
            const lU = this.props.firebase.users().where("email", "==", query[0])
            lU.get().then(snapshot => {
                console.log(snapshot.docs[0].id)
            })
        })

        this.unsubscribe = this.props.firebase
            .users().doc(this.props.firebase.userId()).collection('tasks')
            .onSnapshot(snapshot => {
                let items = [];
                snapshot.forEach(doc =>
                    (doc.data().status === false) ?
                        items.push({ ...doc.data(), uid: doc.id })
                        :
                        null
                );
                this.setState({
                    items,
                    loading: false,
                });
            });
    }

    componentWillUnmount() {
        this.unsubscribe();
        this.unsub();
    }

    removeItem(itemId) {
        const itemRef = this.props.firebase.users().doc(`${itemId}`);
        itemRef.remove();
    }

    render() {

        return (

            <div className='background'>
                <div className='topBar'>
                </div>
                <Paper className={ this.classes.root } elevation={ 1 }>
                    <Album cards={ this.state.items } />
                </Paper>
            </div>

        );
    }
}

const condition = authUser => !!authUser;

export default compose(
    withAuthorization(condition),
    withStyles(styles),
)(ChildPage)

我希望查询运行一次并将返回值分配给变量。然后可以使用该值访问它们并加载文档。

当前，这在控制台中为我提供了一个文档ID。如果我想使用该ID，请使用下两个“}）”括号，并将其放在前面 ” }

componentWillUnmount() {"

并将所有内容放入控制台内部，即“ snapshot.docs [0] .id”，并将其替换为this.unsubscribe文档中的“ this.props.firebase.userId（）”。

但这是一遍又一遍地调用函数并给出错误的原因

“警告：遇到两个具有相同密钥[object Object]的子代。密钥应该是唯一的，以便组件在更新过程中保持其身份。非唯一密钥可能会导致子代重复和/或省略-这是行为不支持，并且可能会在将来的版本中进行更改。“

在函数内部分配值并在外部使用它

0 个答案: