Question

我正在编写一个React Web应用程序，其中我利用通过Firebase提取的数据，并希望根据提取的值填充一系列React对象。

这个想法是，firebase可以通过快照来更新状态，并可以在子组件中引用快照。问题是我在加载Firebase响应方面进行了各种尝试。

我怀疑在DevTools中该功能似乎未触发的原因是因为它仅在收到来自服务器的异步响应后才触发...但是在TextItem中的代码触发时它可能尚未更新，导致接收到的文本为空，从而引发错误。

代码如下：

/* Intialization 
code 
here
*/ 

const dbTextRef = firebase.database().ref('blogs/');


export default class App extends React.Component{
    state = {
        TextList : null,
    }

    //Set listener on data

componentDidUpdate(){   
            dbTextRef.on('value', snapshot => {
        this.setState({
            TextList : snapshot
        });
    });
}
    //In render, pass the state of the div down as props to the

    render(){
        return(
            <div>
                <TextAddContainer TextArray = {this.state.TextList} />

            </div>

        );
    }    
}

export class TextAddContainer extends React.Component{
    constructor(props){
        super(props);

        this.RetrieveText = this.RetrieveText.bind(this);

    console.log("Props received in Text Container is: "+ props.TextArray);

    }

    //When loading or when a user adds new content, retrieve a list 
    //of all content from Firebase

    render(){
        return(
            <div>
                <Dropdown />
                <TextItem TextArray = {this.props.TextArray} />
                <button onClick = {this.RetrieveText}>Refresh</button>
            </div>
            );
    }
}

const TextItem = (props) => {
    console.log("Prop received in individual item is:" + props.TextArray);

    const TextArray = props.TextArray;
    console.log(TextArray);
    const TextValues = Object.values(TextArray[0]);
    var returnArray = [];

    for(let i = 0; i <= TextArray.length; i++){
        returnArray.push(<div key = {i}><p className = "CMSTextPreviewMenu">TextArray[0][i]</p></div>);
    }

    return returnArray;
}

由于Google的文档说，在首次声明时附加.on（'value'）响应会启动数据提取，因此我相信我可以排除.on（）不会触发其结果回调函数的可能性。

以前，我曾经尝试在TextAddcontainer中包含一个函数，该函数将对firebase进行.once（）调用并将该返回值作为prop传递给prop，但是由于我怀疑是相同的原因而最终未定义。

我也曾尝试在绝望中使用UNSAFE_ComponentWillMount（）来尝试使Firebase在呈现子组件之前完成返回响应，但是那也没有用，总之感觉就像是肮脏的hack。

您推荐什么？

请让我知道我的假设是否偏离标准，以及我应该自学哪些主题和词汇，以便将来更好地为这个问题建模。

Answer 1

我通过将侦听器放置在构造函数中并捕获值是否尚未加载来解决此问题。谢谢大家！

Firebase异步引用并在react

1 个答案: