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

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

1 个答案: