Как перезагрузить текущий компонент в реакции?

Question

У меня есть компонент "A" с кнопкой. Когда пользователь нажимает кнопку, я показываю модальный (реагирующий-модальный) с набором полей и кнопкой обновления. Когда пользователь нажимает кнопку обновления на модальной панели, я хочу перезагрузить компонент «А» с обновленными данными.

Я попытался перенаправить, используя this.props.history.push('dashboard/componentA'), но это не сработало. Затем я попытался перенаправить на панель инструментов и снова перенаправить на компонент, как это

this.props.history.push('/dashboard');
this.props.history.push('/dashboard/componentA');

Это сработало, но я не вижу ни одного загрузчика, который я использовал для 'componentWillMount', и компонент просто зависает. Я не мог прокрутить вверх или вниз.

Answer 1

Старайтесь не использовать историю браузера как способ обновления реакции (насколько это возможно). React предназначен для повторного рендеринга компонентов при изменении реквизита или состояния этого компонента. Например, это должно вызвать обновление в ComponentA без необходимости обновлять историю браузера:

class ComponentA extends Component {
  handleModalClick = (event) => {
    this.setState({
      componentData: event.data,
    });
  }

  render() {
    return (
      <ReactModal onClick={this.handleClick} />
    )
  }
}

РЕДАКТИРОВАТЬ: Обновлено, чтобы показать родительский компонент выборки данных:

class DataFetcher extends Component {
  saveAndFetchData = (saveData) => {
    FetchDataPromise(saveData).then((updatedData) => {
      this.setState({ data: updatedData });
    }
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        <ComponentA data={data} />
        <ReactModalComponent handleClick={saveAndFetchData} />
      </div>
    );
  }
}

class ComponentA extends Component {
  render() {
    const { data } = this.props;
    return (
      <div>
        ...render data...
      </div>
    )
  }
}