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

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

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

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)

import React，{Component}来自'React'；
从“./EmailItem”导入EmailItem
类管理扩展组件{
建造师（道具）{
超级（道具）；
此.state={
所有邮件：[]
  }
this.hideEmail=this.hideEmail.bind（this，email）
}
componentDidMount（）{
获取（“/api/emails/”）
.then（res=>res.json（））
。然后（parsedJSON=>parsedJSON.map）（电子邮件=>({
电子邮件：`${emails.email}`，
id:`${emails.id}`
}），然后（emails=>this.setState（{allEmails:emails}））
  }
hideEmail=（）=>this.setState（{allEmails:emails}）
render（）{
返回(
      
管理页面
        
{this.state.allEmails.map（（电子邮件）=>{
返回this.onDelete（this，email.email）}/>
          })}
        
      
    );
  }
}
导出默认管理员；
从“axios”导入axios
从“React”导入React，{Component}；
const-EmailItem=（{email，onDelete}）=>(
  
{email}
     {
e.预防违约（）
axios.delete（“/api/emails/delete/”{
数据：{email:email}
      })
onDelete（）
      }
    }
    >
除去
  
  
)
导出默认值（EmailItem）

您的

管理员组件似乎不知道后端发生的更改。您触发了一个delete，它可以工作，但该组件只在挂载时获得“allEmails”。由于组件已经装入，您不会再次调用fetch来获取最新的电子邮件列表，因此它不会重新呈现

有几种方法可以处理这个问题，但基本上您希望在axios删除成功完成后获取新列表

一个选项是在您的管理组件中创建一个新函数，用于获取电子邮件列表。然后，您可以在componentDidMount函数中调用它，然后将它传递给子
EmailItem
组件，当删除调用成功时，它可以调用该组件

您正在向该组件传递一个
onDelete（）
函数，但我看不到您的代码中定义了该函数。如果这是该功能的目的，请确保它正在重新读取最新的电子邮件列表并设置状态以强制刷新。
代码不足以检查，我可以说Axios的使用方式不是很干净。我假设onDelete（）函数重新加载列表，但需要使用承诺回调“then（）”和“catch（）”来调用和管理