根据 Cookie 获取组件内数据

Question

我有一个这样的组件：

class MyComponent extends React.PureComponent {
  componentDidMount() {
    const { params } = this.props.match
    fetch(`/o/${params.id}`, {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    })
    .then(r => r.json())
    .then(json => {
      this.props.setData(json)
    })
  }
  render() {
    const { t, payload, cookies } = this.props;
    return <div>
      {cookies.cookies.language}
      {payload.myData}
    </div>
  }
}

因此，我在组件中获取数据。但重要的是，生成的数据因我的一个 cookie 而异。因此，在更改我的cookie之后，我也想重新获取我的数据，但我不知道最优雅的方法是什么。我使用react-cookie库，所以现在每个cookie更改都会在我的视图中更新。但是，当然，以render方法重新获取我的数据不是一个好主意，我认为componentDidUpdate也是一个不好的地方。那么，我应该如何解决这个问题呢？

附言。我也使用Redux。

Answer 1

你需要

有一个componentDidUpdate()，你可以在里面检查cookie是否发生了变化，然后进行你的获取调用。

它会是这样的：

componentDidUpdate(prevProps) {
  if (this.props.cookies !== prevProps.cookies) {
    this.fetchData(this.props.cookies).then(...)
  }
}

但看起来这个逻辑以及componentDidMount()应该在组件不纯的地方向上移动一个组件。