javascript - 使用 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 处理程序作为 props 传递下去，但最好将所有这些都保留在同一个组件中。

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

Answer 1

两者都是setVariables和 setState 采用可选的第二个参数，在状态实际更新后运行。

我认为你想要:

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

但也许相反。