Question

我正在使用 React 与 Relay 和 GraphQL 处理应用程序。我遇到了一个问题，我需要在更改中继变量时保留组件的状态。

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

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

我有一个带有以下片段和变量的Relay容器：

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

该组件包含到和来自字段的文本字段，还有一个 onChange 处理程序，它还会更新中继变量

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

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

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

我到目前为止找到的唯一解决方案是将此状态保留在父组件中，并将值和onChange处理程序作为props传递，但将它们全部保存在同一组件中会很好。< / p>

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

Answer 1

状态实际更新后，setVariables和setState都会使用可选的第二个参数运行。

我想你想要：

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

但也许相反。

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

1 个答案: