代码之家 › 专栏 › 技术社区 › Dadsquatch

ComponentDidUpdate在我手动更改MongoDB中的内容后接收更新

reactjs

Dadsquatch · 技术社区 · 6 年前

import React, { Component } from "react";
import CustomerOverviewPage from "../components/customers/customerOverviewPage";

class CustomerView extends Component {
  state = {
    customer: null,
    id: null
  };

  fetchDetails = () => {
    const { id } = this.props.match.params;
    fetch(`/api/customer/fetch-customer/${id}`)
      .then(res => {
        return res.json();
      })
      .then(customer =>
        this.setState({
          customer,
          id
        })
      );
  };

  componentDidMount() {
    this.fetchDetails();
  }

  componentDidUpdate() {
    this.fetchDetails();
  }

  render() {
    if (!this.state.customer) {
      return <div>Loading</div>;
    }
    return (
      <div>
        <div className="container">
          <CustomerOverviewPage
            id={this.state.id}
            customer={this.state.customer}
          />
        </div>
      </div>
    );
  }
}

export default CustomerView;

我很好奇这是如何工作的,因为我刚接触ReactJS,但是我通过MLAB上的沙盒帐户安装了MongoDB,如果我在那里手动删除记录或编辑记录,我的DOM会更新以反映它。

在这种情况下,我将手动修改客户集合并更新名称。它正在重新呈现CustomerView页面组件。

怎么用?