reactjs - 根据 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()and 内部，您可以检查 cookie 是否已更改，然后进行 fetch 调用。

它会是这样的：

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

但看起来这个逻辑componentDidMount()应该向上移动一个组件，其中组件不是纯的。