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

【问题标题】：Preserve React component state with Relay.setVariables使用 Relay.setVariables 保留 React 组件状态
【发布时间】：2017-05-18 03:25:26
【问题描述】：

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

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

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

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

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？

【问题讨论】：

如果将输入to 和from 存储在继电器变量中，为什么还需要将它们存储在组件状态中？
好点，我想我不需要，但是调用 setVariables 后我仍然在状态下丢失了 body。这也只是一个基本示例，我在状态中存储了各种其他字段。

标签： javascript reactjs graphql relay

【解决方案1】：

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

我认为你想要：

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

但也许是相反的。

【讨论】：