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

Posted 2023-03-08

【中文标题】如何使用 Relay QueryRenderer 道具更新状态

【英文标题】：How to update state with Relay QueryRenderer props

【发布时间】：2018-05-12 14:41:55

【问题描述】：

我有一个带有用于更新数据库记录的表单的反应组件。 事情是这样的：数据是使用 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 并使用字符串 refs 和回调的 refs 从输入中获取 defaultValue。调用 this.refs 时我得到了未定义的值

目前，如果我在 QueryRenderer 渲染函数中调用一个函数，如果 state 为空，则使用 props 设置状态。例如

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

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

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

【参考方案1】：

在表单组件中使用componentWillReceiveProps

class Form extends React.Component 

    ...

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

    ...

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

【讨论】：

对不起，我忘了说我的 Form 组件只是从 Semantic-Ui-React 组件导入的。但根据您的回答，解决方法可能是创建一个实际的 Form 组件，该组件用 componentwillReceiveProps 包装实际表单和所有输入？

是的。只需将语义 UI 的表单包装在您自己的包含状态的父组件中。

在这种情况下，如何从我的更新组件访问我的表单组件状态？我的更新按钮（我用 this.state 更新的地方）在表单组件之外。

谢谢！感谢您的回答，我设法解决了我的问题。我编辑了我的答案，以准确评论我是如何解决这个问题的。 （由于某种原因，componentWillReceiveProps 没有被调用，所以我不得不使用 componentDidMount）

在我的回答中，componentWillReceiveProps 的拼写有误。我刚刚修好了。再试一次。应该管用。这种情况下比componentDidMount好用