依赖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 也是一个不好的地方。那么，我该如何解决这个问题呢？

PS。我也用 Redux。

Answer 1

您需要有一个 componentDidUpdate()，您可以在其中检查 cookie 是否已更改，然后进行提取调用。

会是这样的：

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

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

依赖cookie的组件内数据获取

In-component data fetching depending on cookie

reactjs

react-cookie