删除功能不起作用，也没有出现错误

Question

你好，我有一个关于 firebase 的问题，也许还有我的代码，我在 JSX 中编写了一些代码，React 链接到 Firebase，但我用来删除的按钮无法正常工作。

我正在使用 Parent Child 道具将函数传递到需要删除的页面，但没有任何功能。我需要帮助谢谢！

这是函数所在的父级：

import React from 'react';
import fire from '../config/firebase';
import Modal from 'react-modal';
// import "firebase/database";
// import 'firebase/auth';

import NotesCard from './note-card';

Modal.setAppElement('#root');


export default class Notes extends React.Component {
  _isMounted = false;
  
  constructor(props) {
    super(props);
    
    this.state = {
      notes: [],
      showModal: false,
      loggedin: false
    };
    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
    this.handleAddNote = this.handleAddNote.bind(this);
    this.handleRemoveNote = this.handleRemoveNote.bind(this);

  }
  
  componentDidMount() {
    this._isMounted = true;

    fire.auth().onAuthStateChanged((user) => {
      if(user){
        // call firebase from import fire 
        // grab userData and push it to the dataArray
        fire.database().ref(`users/${user.uid}/notes`).on('value', (res) => {
          const userData = res.val()
          const dataArray = []
          for(let objKey in userData) {
            userData[objKey].key = objKey
            dataArray.push(userData[objKey])
          }
          // set in the state 
          if(this._isMounted){
            this.setState({
            notes: dataArray,
            loggedin: true
            })
          }
        });
      }else {
        this.setState({loggedin: false})

      }
    });
  };

  componentWillUnmount() {
    this._isMounted = false;
  }

  handleAddNote (e) {
    e.preventDefault()

    const note = {
      title: this.noteTitle.value,
      text: this.noteText.value
    }
    // reference where we can push it
    const userId = fire.auth().currentUser.uid;
    const dbRef = fire.database().ref(`users/${userId}/notes`);
    dbRef.push(note)

    this.noteTitle.value = ''
    this.noteText.value = ''
    this.handleCloseModal()
  }

  handleRemoveNote(key) {
    const userId = fire.auth().currentUser.uid;
    const dbRef = fire.database().ref(`users/${userId}/notes/${key}`);
    dbRef.remove();
  }

  handleOpenModal (e) {
    e.preventDefault();
    this.setState({
      showModal: true
    });
  }

  handleCloseModal () {
    this.setState({
      showModal: false
    });
  }



  render() {
    return (
      <div>
        <button onClick={this.handleOpenModal}>create Note</button>
        <section className='notes'>
          {
            this.state.notes.map((note, indx) => {
              return (
                <NotesCard 
                  note={note} 
                  key={`note-${indx}`} 
                  handleRemoveNote={this.handleRemoveNote}
                /> 
              )
            }).reverse()
          }
        </section>
        <Modal
        isOpen={this.state.showModal}
        onRequestClose={this.handleCloseModal}
        shouldCloseOnOverlayClick={false}
        style={
          {
            overlay: {
              backgroundColor: '#9494b8'
            },
            content: {
              color: '#669999'
            }
          }
        }
        >
          <form onSubmit={this.handleAddNote}>
            <h3>Add New Note</h3>
            <label htmlFor='note-title'>Title:</label>
            <input type='text' name='note-title' ref={ref => this.noteTitle = ref} />
            <label htmlFor='note-text'>Note</label>
            <textarea name='note-text' ref={ref => this.noteText = ref} placeholder='type notes here...' />
            <input type='submit' onClick={this.handleAddNote} />
            <button onClick={this.handleCloseModal}>close</button>
          </form>
        </Modal>
      </div>
    )
  }
}

这是调用函数的地方：

import React from 'react';
import fire from '../config/firebase';

export default class NotesCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editing: false,
      note: {}
    }
    this.handleEditNote = this.handleEditNote.bind(this);
    this.handleSaveNote = this.handleSaveNote.bind(this);
  }

  handleEditNote() {
    this.setState({
      editing: true
    })
  }

  handleSaveNote(e) {
    e.preventDefault()
    const userId = fire.auth().currentUser.uid;
    const dbRef = fire.database().ref(`users/${userId}/notes/${this.props.note.key}`);
    dbRef.update({
      title: this.noteTitle.value,
      text: this.noteText.value
    })
    this.setState({
      editing: false
    })
  }

  render() {
    let editingTemp = (
      <span>
        <h4>{this.props.note.title}</h4>
        <p>{this.props.note.text}</p>
      </span>
    )
    if(this.state.editing) {
      editingTemp = (
        <form onSubmit={this.handleSaveNote}>
          <div>
            <input 
              type='text' 
              defaultValue={this.props.note.title} 
              name='title' 
              ref={ref => this.noteTitle = ref}
            />
          </div>
          <div>
            <input 
              type='text' 
              defaultValue={this.props.note.text} 
              name='text' 
              ref ={ref => this.noteText = ref}
            />
          </div>
          <input type='submit' value='done editing' />
        </form>
      )

    }
    
    return (
      <div>
        <button onClick={this.handleEditNote}>edit</button>
        <button onClick={this.props.handleRemoveNote(this.state.note.key)}>delete</button>
        {editingTemp}
      </div>
    )
  }
}

提前感谢您查看这段代码。

Answer 1

第二次迭代答案

工作沙箱

问题

正在看https://codesandbox.io/s/trusting-knuth-2og8e?file=/src/components/note-card.js:1621-1708

我看到你有这条线

<button onClick={()=> this.props.handleRemoveNote(this.state.note.key)}>delete

然而您的 state.note 在构造函数中声明为空映射：

 this.state = {
   editing: false,
   note: {}
}

但从未在组件中使用this.setState赋值

解决方案

改为：

<button onClick={()=> this.props.handleRemoveNote(**this.props.note.key**)}>delete</button>

第一次迭代答案

NotesCard 的按钮在渲染时触发 onClick 回调，而不是在点击事件时触发。
这是因为您执行了函数而不是将回调传递给 onClick 处理程序

改变

<button onClick={this.props.handleRemoveNote(this.state.note.key)}>delete</button>

至

<button onClick={()=> this.props.handleRemoveNote(this.state.note.key)}>delete</button>

删除功能不起作用，也没有出现错误

Deleting function not working and no errors appear

crud

jsx

firebase

reactjs

第二次迭代答案

工作沙箱

问题

解决方案

第一次迭代答案