Question

我遇到一个基于小型 React Relay 的项目。该组件是带有输入字段的表单，可以使用 QueryRenderer 从服务器接收数据，并可以通过变异发送修改后的数据。问题在于，如果您更新 QueryRenderer 内部的状态，则会再次渲染组件，这将导致无限循环。但是必须将从服务器接收的数据置于一种状态，以便可以对其进行更新并将其发送回服务器。如何在 Relay 应用程序中执行此操作？我将不胜感激。下面是我的项目的简化代码。附言一些标签来自蚂蚁设计。

<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 查询等都可以正常工作，因此在此未提供它们。问题是从哪里获取从服务器接收的数据，在表单输入中使用它，然后通过变异将修改后的数据发送出去。

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

0 个答案: