Состояние очистки после рендера

Question

Рассмотрим этот HOC, который я использую для извлечения данных

function withData(Component, endpoint) {
  return class extends React.Component {
    state = {
      result: null,
      loading: false,
      error: { state: false, msg: '' }
    };

    fetchData = async () => {
      try {
        this.setState({ loading: true });
        const response = await axios.get(`${endpoint}/${this.props.params || ''}`);
        this.setState(state => ({ result: response.data, loading: !state.loading }));
      } catch (err) {
        console.log('Error caugh in withData HOC', err);
        this.setState({ error: true });
      }
    };

    componentDidMount() {
      this.fetchData();
    }

    componentDidUpdate(prevProps) {
      if (this.props.params !== prevProps.params) {
        this.fetchData();
      }
    }

    render() {
      const { result, loading } = this.state;
      if (loading) return <p>Loading...</p>;
      if (!result) return null;

      return <Component result={result} {...this.props} />;
    }
  };
}

Вы заметите, что я говорю, если !result не визуализирует компонент. Проблема в том, что когда this.props.params к этому компоненту изменяется, this.state.result сохраняет значение более старого состояния. Я хочу сбросить результат в null после каждого рендера, чтобы он вел себя точно так же, как и при первоначальном рендере.

Как мне этого добиться?

Чтобы было понятнее, было бы здорово, если бы я мог сделать это в componentWillUnmount, чтобы он был готов к следующему жизненному циклу компонента. Однако компонент никогда не отключается.

Обратите внимание, что это должно быть сделано в HOC, а не в компоненте, который он возвращает.

Answer 1

В этом случае вы захотите, чтобы ваш компонент (обработанный HOC) принял опцию ключа, которая в моем случае будет реквизитом params.

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

Подробнее о поведении можно прочитать здесь https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key