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

Posted 2023-02-19

【中文标题】使用 Relay.setVariables 保留 React 组件状态

【英文标题】：Preserve React component state with Relay.setVariables

【发布时间】：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。这也只是一个基本示例，我在状态中存储了各种其他字段。

【参考方案1】：

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

我认为你想要：

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

但也许是相反的。