如何从数据库ondelete反应重新渲染列表视图

Question

我这里有2个文件，一个是从数据库发送数据的父组件，另一个是带有删除按钮的渲染信息。

这是我最近一次尝试从数据库中删除数据（有效）并重新呈现列表（不重新呈现）的当前错误。当前错误是电子邮件不是有效变量。

import React, { Component } from 'react';
import EmailItem from './EmailItem'

class Admin extends Component {

  constructor(props) {
    super(props);
    this.state = {
    allEmails: []
  }
  this.hideEmail = this.hideEmail.bind(this, email)
}

  componentDidMount() {
    fetch("/api/emails/")
      .then(res => res.json())
      .then(parsedJSON => parsedJSON.map(emails => ({
        email: `${emails.email}`,
        id: `${emails.id}`
      }))).then(emails => this.setState({allEmails: emails}))
  }

  hideEmail = () => this.setState({allEmails:emails})

  render() {
    return (
      <div>
        <h2>Admin Page</h2>
        <div>
          {this.state.allEmails.map((email) => {
            return <EmailItem
              key={email.id}
              email={email.email}
              onDelete = {() => this.onDelete(this, email.email)}/>
          })}
        </div>
      </div>
    );
  }
}

export default Admin;



import axios from 'axios'
import React, { Component } from 'react';



const EmailItem = ({email, onDelete}) => (

  <div>
    <h3>{email}</h3>
    <button
      onClick={(e) => {
      e.preventDefault()
      axios.delete("/api/emails/delete/", {
        data: {email: email}
      })
      onDelete()
      }
    }
    >
      Remove
  </button>
  </div>
)
export default (EmailItem)

Answer 1

看来您的Admin组件不知道后端发生的更改。 您可以启动删除操作，但是可以删除，但是该组件仅在挂载时获得“ allEmails”。 在已经安装了组件的情况下，您无需再次调用获取来获取最新的电子邮件列表，因此它永远不会重新渲染。

有几种方法可以解决此问题，但是基本上，您将需要在axios删除成功完成后获取新列表。

一种选择是在您的Admin组件中创建一个新功能，该功能将获取电子邮件列表。 然后，您可以在componentDidMount函数中调用该函数，然后还将其传递给子EmailItem组件，该组件可以在成功完成删除调用后调用该子组件。

您正在将onDelete()函数传递给该组件，但是我看不到代码中定义的那个函数。 如果那是该功能的目的，请确保其正在重新获取最新的电子邮件列表并设置状态以强制刷新。