Question

我希望创建一个onClick处理程序，我可以从Firebase中删除所选数据，也可以删除页面上呈现的选定列表。下面的代码显示了我如何从firebase检索数据并使用ReactJS将其呈现到我的网页。我还附上了来自firebase的数据图片。

import React, { Component } from 'react';

import database, {User} from '../firebase-setup.js'
import classes from './WatchListPage.css'

class WatchListPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listOfShows: []
    };
  }

  componentDidMount() {
    database.ref('shows/' + User.user.uid).on('child_added', snapshot => {
      const newList = this.state.listOfShows;
      newList.push({
        showId: snapshot.key,
        title: snapshot.val().title,
        genre: snapshot.val().genre
      });
      this.setState({
        listOfShows: newList
      });
      console.log('test', JSON.stringify(newList))
    });
  }



  render() {
    const listOfShows = this.state.listOfShows.map((show) =>
      <li key={show.showId}>
        {show.title} {show.genre}
      </li>
    );

    return (
      <div>
        {listOfShows}
      </div>
    );
  }
}

export default WatchListPage

Answer 1

有多种方法可以实现它。

1）按照您的代码进行操作。实现一个onClick处理程序，它将从firebase和状态列表中删除该项。我没有实现firebase写入失败的错误情况。如果需要，我们还可以在从firebase删除内容时实现一些加载屏幕。

import React, { Component } from 'react';

import database, {User} from '../firebase-setup.js'
import classes from './WatchListPage.css'

class WatchListPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listOfShows: []
    };
  }

  componentDidMount() {
    database.ref('shows/' + User.user.uid).on('child_added', snapshot => {
      const newList = this.state.listOfShows;
      newList.push({
        showId: snapshot.key,
        title: snapshot.val().title,
        genre: snapshot.val().genre
      });
      this.setState({
        listOfShows: newList
      });
      console.log('test', JSON.stringify(newList))
    });
  }



  render() {
    const listOfShows = this.state.listOfShows.map((show, index) =>
      <li key={show.showId} onClick={this.removeShow.bind(this, index)}>
        {show.title} {show.genre}
      </li>
    );

    return (
      <div>
        {listOfShows}
      </div>
    );
  }

  removeShow(index) {

    let showItem = this.state.listOfShows[index];
    database.ref('shows/' + User.user.uid +'/'+ showItem.showId).remove();
    this.state.listOfShows.splice(index, 1);
    this.setState({listOfShows: this.state.listOfShows });
  }

}      

export default WatchListPage

2）如果数据不是太大，我想采用这种方法。它还将改善您的应用程序的性能。

首先，我们应该始终在componentWillMount（）而不是componentDidMount（）中实现数据提取，为什么要等待组件呈现以获取一些外部数据。

其次，不要让'child_added'监听器实现'value'监听器，因为你想要显示所有数据。拥有child_added侦听器将在每次获取一个子节点时更新状态，从而导致多个渲染，即。如果有5个孩子，那么它将呈现5次。而使用'value'监听器只会获取一次数据，直到它被更改为止。让我们深入了解代码，您将获得更好的理解。

import React, { Component } from 'react';

import database, {User} from '../firebase-setup.js'
import classes from './WatchListPage.css'

class WatchListPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listOfShows: []
    };
  }

  componentWillMount() {
    this.handler = database.ref('shows/' + User.user.uid).on('value', snapshot => {
      const showList = snapshot.val();
      let newList = [];
      for(let showId in showList) {
         newList.push({
            showId: showId,
            title: showList[showId].title,
            genre: showList[showId].genre
         });
      }

      this.setState({
        listOfShows: newList
      });
      console.log('test', JSON.stringify(newList))
    });
  }

  componentWillUnmount() {
    database.ref('shows/' + User.user.uid).off('value', this.handler);
  }



  render() {
    const listOfShows = this.state.listOfShows.map((show) =>
      <li key={show.showId} onClick={this.removeShow.bind(this, show.showId)}>
        {show.title} {show.genre}
      </li>
    );

    return (
      <div>
        {listOfShows}
      </div>
    );
  }

  removeShow(showId) {
    database.ref('shows/' + User.user.uid +'/'+ showId).remove();
  }

}

export default WatchListPage

了解第二种方法中removeShow（）方法的简化程度。您不需要操纵您的状态，因为它与firebase同步，因为'value'监听器。另外，我已经实现了componentWillUnmount（）方法。在销毁组件之前移除“on”侦听器总是很好，否则会导致内存泄漏。

如何在ReactJS中编写Delete Handler，它也会删除Firebase中的数据

1 个答案: