React组件不在firebase child_update事件上重新呈现

问题描述：

我已经写了一个基本的反应 + Firebase应用程序只是为了确定它是如何工作的。React组件不在firebase child_update事件上重新呈现

我有返回基于从火力地堡数据库中的组数据返回反应的组分（邮政）的列表的反应组分（ViewPosts）。

我已经附加child_removed的火力地堡事件，child_added和上componentDidMount()

child_changed所有这一切我安装工作正常的事件，但只有child_changed事件不重新渲染页面。但我添加了一个console.log只是为了检查事件是否被触发。（我正在更新/删除使用Firebase控制台的值）

我认为这可能是一个关键的问题，所以我甚至添加了一个索引，使其独特但仍然没有幸运。我在这里错过了什么？为什么代码给了我这种行为。

由于React只更新更新的组件，即使我删除了或向列表中添加了新组件，列表也不会更新，但是如果我删除了一个组件并且该组件恰好位于更新组件之上（Post）那么由于React*重新呈现该组件下方的列表，我可以看到更新后的值。

请帮我找出为什么发生这种情况

ViewPosts

import React, { Component } from 'react'; 
import * as firebase from 'firebase'; 
import Post from './Post'; 

var listItems = null; 
var starCountRef = null; 
class ViewPosts extends Component { 

    constructor(props) { 
    super(props); 
    this.state = {renderedList: []}; 
    this.getDatafromDB = this.getDatafromDB.bind(this); 
    starCountRef = firebase.database().ref('posts'); 
    } 

    getDatafromDB() { 
    listItems = []; 
    starCountRef.once('value', snapshot => { 
     var results = snapshot.val(); 
     var resultsKeys = Object.keys(results); 
     listItems = resultsKeys.map((key,i) => <Post key={key.toString() + i} value={results[key].value + i } />); 

     this.setState({ 
     renderedList : listItems 
     }); 
    }); 
    } 
    componentDidMount(){ 

    // Get the data on a post that has been removed 
    starCountRef.on("child_removed", snapshot => { 
     var deletedPost = snapshot.val(); 
     console.log("The post valued '" + deletedPost.value + "' has been deleted"); 
     this.getDatafromDB(); 
    }); 

    // Get the data on a post that has been removed 
    starCountRef.on("child_added", snapshot => { 
     var addedPost = snapshot.val(); 
     console.log("The post value '" + addedPost.value + "' has been added"); 
     this.getDatafromDB(); 
    }); 

    starCountRef.on("child_changed", snapshot => { 
     var changedPost = snapshot.val(); 
     console.log("The updated post value is " + changedPost.value); 
     this.getDatafromDB(); 
     console.log("this.state.listItems " + this.state.renderedList); 
    }); 

    } 
    render() { 
    return(
    <div> 
     <ul> 
     {this.state.renderedList} 
     </ul> 
     </div> 
    ); 
} 
} 

export default ViewPosts;

后

import React, { Component } from 'react'; 

class Post extends Component { 

    constructor(props) { 
    super(props); 
    this.state = {value: props.value}; 
    } 

render() { 
    return(
    <li>{this.state.value}</li> 
    ); 
} 
} 

export default Post;

答

我介绍了一个新的属性 “UID”，并绘制了UID来组件的关键。然后，当我更新UID和值时，React将其作为更新选取并重新呈现该组件。

即使我已经将索引包含在键中，直到删除上面的一个组件将会是相同的，并解释了为什么当我从顶部删除组件时重新呈现的原因。

基本上，如果有多个相同类型的组件，那么这些组件必须与唯一键绑定，除非该键已更改，即使该值发生更改，React也不会重新呈现该组件。

据我所知，React在后台做了什么，创建一个虚拟DOM并将其与现有的DOM进行比较，并只重新渲染更改后的组件。似乎这样看起来的关键，如果有多个时，像，如果它同它跳过了整个组件

而且在情况下，如果你不知道如何创建我使用lodash的_.uniqueId([prefix=''])方法生成一个关键

谢谢，

React组件不在firebase child_update事件上重新呈现

相关推荐