使用 apollo 客户端设置初始状态

Question

我正在尝试使用带有 graphql 的 apollo 客户端创建的道具来设置反应状态变量的初始状态。

 this.state = {data:myFunc(this.props.data};

问题是设置状态时this.props.data为空。我查看了生命周期方法中的设置，但它仍然 returns 是空的。只有在 render() 中调用函数时，我才会得到输出。

Answer 1

我假设 this.props.data 是异步加载的，当您尝试将其分配给 this.state 时尚未加载（我在构造函数中假设）。

做这件事的好地方是 getDerivedStateFromProps:

static getDerivedStateFromProps(props, prevState) {
  if (props.data && !prevState.data) {
    // Only return this when props.data has just loaded. 
    // Figure out the best way to determine that for your code.
    return { data:  myFunc(props.data) };
  }
  return {};
}

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

使用 apollo 客户端设置初始状态

Set initial state using apollo client

reactjs

react-apollo

graphql-js