如何使用 Relay QueryRenderer 道具更新状态

Question

我有一个带有用于更新数据库记录的表单的 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>
           )...
      }/>
    )}

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

我已经尝试使用 componentDidMount 并使用字符串引用和回调引用来从输入中获取默认值。调用 this.refs

时我得到了未定义的值

现在，如果我在 QueryRenderer 渲染函数中调用一个函数，如果状态为空，它会使用 props 设置状态。例如

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

但它导致了我需要解决的 anti-pattern（纯渲染方法）。

编辑： 对于任何想知道我是如何解决这个问题的人。感谢 charlie 的回答，我设法创建了一个 UpdateForm 组件包装器，它从 QueryRenderer 接收道具，为了更新我的 parent 的组件状态，我将我的 handleChange 函数作为道具传递给了我的 FormUpdate 组件

Answer 1

在表单组件中使用 componentWillReceiveProps

class Form extends React.Component {

    ...

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

    ...
}

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

如何使用 Relay QueryRenderer 道具更新状态

How to update state with Relay QueryRenderer props

javascript

reactjs

graphql

relay

react-relay