代码之家 › 专栏 › 技术社区 › Andreas

在react apollo的查询组件中设置状态

react-apollo reactjs

17

Andreas · 技术社区 · 8 年前

因此,我试图为从服务器获取数据的编辑组件设置初始状态,现在应该可以在组件状态下进行编辑。但当我尝试这样做的时候:

<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
    {({ data, loading, error }) => {
      this.setState({ title: data.title })

我陷入了一个无限循环,因为这是在渲染。我不应该将组件状态与查询组件一起使用吗?如果没有,还有什么选择呢?

2 回复 | 直到 8 年前

1

19

Daniel Rearden 8 年前

无论哪个组件需要此数据作为状态,都应在 Query 组件,然后将数据作为一个道具传递给它。例如:

class MyComponent extends React.Component {
  constructor (props) {
    this.state = {
      title: props.post.title
    }
  }
}

<Query query={POST_QUERY} variables={{ id: this.props.match.params.id }}>
  {({ data, loading, error }) => {
    <MyComponent post={data.post}/>
  }}
</Query>

2

11

Eesa 7 年前

您可以使用 onCompleted 支撑 Query 组件以设置状态。见下例:

class MyComponent extends React.Component {
  constructor (props) {
    this.state = {
      isFirstRender: true
      title: props.post.title
    }
  }

  setTitle = title => {
    if (this.state.isFirstRender){
        this.setState({title, isFirstRender: false})
    }
  }

  render () {
    return <Query query={POST_QUERY} variables={{ id: this.props.match.params.id }} onCompleted={data => this.setTitle(data.post.title)} >
      {({ data, loading, error }) => {
        <MyComponent post={data.post}/>
      }}
    </Query>
  }
}