如何使用Relay QueryRenderer道具更新状态-Java 学习之路

我有一个带有用于更新数据库记录的表单的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值设置setState .

我已尝试使用componentDidMount并使用refs字符串引用和回调函数来从Inputs获取defaultValue . 调用this.refs时我得到了未定义的值

现在，如果我在QueryRenderer渲染函数中调用一个函数，它可以工作，如果state为空，则使用props设置状态 . 例如

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

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

Edit: 对于任何想知道我是如何解决这个问题的人 . 感谢charlie 's answer I managed to create a UpdateForm component wrapper that receives the props from QueryRenderer, and in order to update my parent'的组件状态，我将handleChange函数作为props传递给我的FormUpdate组件

1 回答

在表单组件中使用componentWillReceiveProps

class Form extends React.Component {

    ...

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

    ...
}

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

回复于 2024-04-29T05:45:26+08:00

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

1 回答

相关问题