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

上了解有关行为的更多信息

渲染后清除状态

1 个答案: