Javascript 如何使用中继QueryRenderer道具更新状态

我有一个react组件，带有一个用于更新数据库记录的表单。 事情是这样的：数据加载了React Relay QueryRenderer组件，如下所示：

class Update extends Component {
   //constructor..
   //some stuff
   render() {
    return(
      <QueryRenderer
        environment={environment}
        query={UpdateQuery}
        render={({error, props}) => {
        //validations
          return (
            <Form loading={this.state.loading}>
            //inputs
            </Form>
           )...
      }/>
    )}

但它导致了我需要解决的反模式（纯渲染方法）

编辑： 任何想知道我是如何解决这个问题的人。由于charlie的回答，我成功地创建了一个UpdateForm组件包装器，该包装器接收来自QueryRenderer的道具，为了更新父组件的状态，我将handleChange函数作为道具传递给我的FormUpdate组件，以在表单组件中使用

class Form extends React.Component {

    ...

    componentWillReceiveProps(nextProps) {
        if (nextProps.loading) return
        this.setState({
           name: nextProps.name
        })
    }

    ...
}

这将仅在数据可用时设置一次状态，因为QueryRenderer仅在加载数据后调用render一次。

在表单组件中使用

class Form extends React.Component {

    ...

    componentWillReceiveProps(nextProps) {
        if (nextProps.loading) return
        this.setState({
           name: nextProps.name
        })
    }

    ...
}

---

这只会在数据可用时设置一次状态，因为QueryRenderer仅在数据加载后调用render一次。

对不起，我忘了提到我的表单组件只是从语义Ui组件导入的。但是根据您的回答，workwaround可能正在创建一个实际的表单组件，该组件封装了实际表单，并且所有的输入都将使用componentwillReceiveProps？是的。只需将语义UI的表单包装在您自己的父组件中，该组件保存状态。在这种情况下，如何从更新组件访问表单组件状态？我的更新按钮（我用这个.state更新的地方）在表单组件之外。谢谢！多亏了你的回答，我终于解决了我的问题。我编辑了我的答案，以评论我是如何解决这个问题的。（由于某种原因，componentWillReceiveProps没有被命名，所以我不得不使用componentDidMount）我的答案中的

componentWillReceiveProps

拼写错误。我刚修好。再试一次。应该有用。在这种情况下，最好使用

componentDidMount

对不起，我忘了提到我的表单组件只是从语义Ui组件导入的。但是根据您的回答，workwaround可能正在创建一个实际的表单组件，该组件封装了实际表单，并且所有的输入都将使用componentwillReceiveProps？是的。只需将语义UI的表单包装在您自己的父组件中，该组件保存状态。在这种情况下，如何从更新组件访问表单组件状态？我的更新按钮（我用这个.state更新的地方）在表单组件之外。谢谢！多亏了你的回答，我终于解决了我的问题。我编辑了我的答案，以评论我是如何解决这个问题的。（由于某种原因，componentWillReceiveProps没有被命名，所以我不得不使用componentDidMount）我的答案中的

componentWillReceiveProps

拼写错误。我刚修好。再试一次。应该有用。在这种情况下，最好使用componentDidMount