使用 Relay.setVariables 保留 React 组件状态

Question

我正在使用 React 和 Relay 和 GraphQL 开发一个应用程序。我运行遇到了一个问题，我需要在更改继电器变量时保留组件的状态。

例如，假设我有组件状态：

state = {
  to: '',
  from: '',
  body: '',
  ...
}

我有一个包含以下片段和变量的中继容器：

initialVariables: {
  to: '',
  from: '',
},
fragments: {
  viewer: () => Relay.QL`
    fragment on viewer {
      ...
      thread(to: $to, from: $from)
    }
  `
}

该组件具有 to 和 from 字段的文本字段，以及 onChange也更新中继变量的处理程序

onChange = e => {
  const to = e.target.value;

  this.setState({ to });
  this.props.relay.setVariables({ to });
}

这导致查询再次执行，组件重新呈现，并且我丢失了对当前组件状态的任何更改。

到目前为止，我发现的唯一解决方案是将此状态保留在父组件中，并将值和 onChange 处理程序作为道具传递下去，但最好将它们全部保留在同一个组件中。

如何在不丢失状态的情况下调用relay.setVariables？

Answer 1

在状态实际上更新后，setVariables和setState都将可选的第二个参数传递给运行。

我认为你想要：

this.props.relay.setVariables({ to }, () => this.setState({ to }));

但也许反过来。

使用 Relay.setVariables 保留 React 组件状态

Preserve React component state with Relay.setVariables

javascript

relay

reactjs

graphql