После обновления страницы выборка не выполняется

Question

Когда я открываю определенную страницу, выборка выполняется успешно и данные получены, однако по какой-то причине после обновления страницы выборка даже не ожидает, что ее даже не видно в инспектировании. Если что-то кажется неправильным, пожалуйста, укажите на это, потому что я потратил много времени, пытаясь понять, почему это происходит.

state = {
  metaInfoDocs: [],
  docs: [],
  loading: false,
};

componentDidMount() {
  this.props.selectedDocsStore.clear();
  this.props.selectedDocsStore.setViewDocId(0);
  this.setState({ loading: true });
  this.props
    .fetchMetaDocs()
    .then((r) => this.setState({ metaInfoDocs: r.data, loading: false }))
    .catch((err) => {
      this.setState({ loading: false });
      errorWithMessage("Could not load documents");
    });
  this.props.eventManager.on("viewDoc", (doc) => {
    this.loadDocuments(doc.id);
  });
}
export default class CentralDocuments extends React.Component {

  render() {
    return (
      <GeneralDocPresenter
        type={"centralInformationDocuments"}
        fetchMetaDocs={() => getMetaInfoByType("central-document")}
        loadDocument={(id) => getCentralDocuments(id)}
        eventManager={new EventManager()}
        childComponents={{
          metaDocViewer: MetaInfoDocViewer,
          metaView: MetaInfoListView,
        }}
      />
    );
  }
}

Answer 1

Вам также необходимо использовать метод жизненного цикла componentDidUpdate (). Например:

updateDoc = () => {
  this.props.selectedDocsStore.clear();
  this.props.selectedDocsStore.setViewDocId(0);
  this.setState({ loading: true });
  this.props
    .fetchMetaDocs()
    .then((r) => this.setState({ metaInfoDocs: r.data, loading: false }))
    .catch((err) => {
      this.setState({ loading: false });
      errorWithMessage("Could not load documents");
    });
  this.props.eventManager.on("viewDoc", (doc) => {
    this.loadDocuments(doc.id);
  });
}

componentDidUpdate() {
  this.updateDoc()
}

componentDidMount() {
  this.updateDoc()
}

Answer 2

Вы используете только componentDidMount (), вам также нужно поместить код в componentDidUpdate ().

Примерно так ..

state = {
  metaInfoDocs: [],
  docs: [],
  loading: false,
};

componentDidMount() {
  this.props.selectedDocsStore.clear();
  this.props.selectedDocsStore.setViewDocId(0);
  this.setState({ loading: true });
  this.props
    .fetchMetaDocs()
    .then((r) => this.setState({ metaInfoDocs: r.data, loading: false }))
    .catch((err) => {
      this.setState({ loading: false });
      errorWithMessage("Could not load documents");
    });
  this.props.eventManager.on("viewDoc", (doc) => {
    this.loadDocuments(doc.id);
  });
}

componentDidUpdate() {
  this.props.selectedDocsStore.clear();
  this.props.selectedDocsStore.setViewDocId(0);
  this.setState({ loading: true });
  this.props
    .fetchMetaDocs()
    .then((r) => this.setState({ metaInfoDocs: r.data, loading: false }))
    .catch((err) => {
      this.setState({ loading: false });
      errorWithMessage("Could not load documents");
    });
  this.props.eventManager.on("viewDoc", (doc) => {
    this.loadDocuments(doc.id);
  });
}
export default class CentralDocuments extends React.Component {

  render() {
    return (
      <GeneralDocPresenter
        type={"centralInformationDocuments"}
        fetchMetaDocs={() => getMetaInfoByType("central-document")}
        loadDocument={(id) => getCentralDocuments(id)}
        eventManager={new EventManager()}
        childComponents={{
          metaDocViewer: MetaInfoDocViewer,
          metaView: MetaInfoListView,
        }}
      />
    );
  }
}

исправление ошибки