如何使用继电器QueryRenderer Props更新状态

Question

我有一个反应组件，其中包含用于更新数据库记录的表单。这是事实：数据加载了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>
           )...
      }/>
    )}

如果成功，Props变量应该存储服务器响应的结果。但是，我需要使用this.state值调用更新。我需要一种使用道具值设置的方法。

我已经尝试了componentDidmount，并使用refs同时使用字符串refs和回调的内容来从输入中获取DefaultValue。我在调用this.refs

时有未定义的值

目前，如果我在QueryRenderer渲染函数中调用函数，该功能在状态为空（如果状态为空）设置状态。例如

function initValues(props){
  if(!this.state.name)
    this.setState({name: props.result.name})
}

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

编辑：对于任何想知道我如何解决这个问题的人。感谢Charlie的答案，我设法创建了一个从QueryRenderer接收道具的更新Form组件包装器，并且为了更新父母的组件状态，我将我的处理功能传递给了我的formupdate组件

Answer 1

在您的表单组件中使用componentwillreceiveprops

class Form extends React.Component {
    ...
    componentWillReceiveProps(nextProps) {
        if (nextProps.loading) return
        this.setState({
           name: nextProps.name
        })
    }
    ...
}

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