javascript - 如何在 Relay QueryRenderer 中更新 React 状态？

Question

我对基于React Relay的小型项目有疑问。该组件是一个带有输入字段的表单，它使用QueryRenderer从服务器接收数据，并可以通过突变发送修改后的数据。问题是如果更新QueryRenderer内部的状态，那么组件会再次渲染，这将导致无限循环。但是从服务器接收到的数据必须被带入一个状态，以便它可以被更新并发送回服务器。如何在Relay应用程序中执行此操作？如果有任何帮助，我将不胜感激。下面是我的项目的简化代码。PS 一些标签取自 ant design。

<QueryRenderer
  environment={environment}
  query={HeroAllPostQuery}
  render={({ error, props }) => {
    if (error) {
      return <div>{error.message}</div>;
    } else if (props) {
      let hero = props.viewer.allPosts.edges[0].node;
      this.setState({ name: hero.name });
      return (
        <Form>
          <Form.Item label="Hero name"><Input name='name' defaultValue={hero.name} value={this.state.name} onChange={this._handleChange} /></Form.Item>
          <Button type="primary" onClick={() => {
            this._handleUpdateHero(hero.id);
          }}>Save</Button>
        </Form>
      );
    }
    return <div>Loading...</div>
  }}
/>

应用程序的其余部分——表单处理程序、graphql查询等工作正常，所以我没有在这里给出它们。问题是从哪里获取从服务器接收到的数据，在表单输入中使用它，然后通过突变发送修改后的数据。

标签： javascriptreactjsgraphqlrelay