如何使用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值設置setState的方法。

我嘗試使用componentDidMount並同時使用refs和string refs以及callback來從Inputs獲取defaultValue。 調用this.refs時得到未定義的值

目前，如果我在QueryRenderer渲染函數中調用一個函數（如果狀態為空）則用props設置狀態，則它可以工作。 例如

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

但這會導致我需要解決的反模式（純渲染方法）。

編輯：對於任何想知道我如何解決此問題的人。 感謝charlie的回答，我設法創建了一個UpdateForm組件包裝器，該包裝器從QueryRenderer接收了道具，並且為了更新我父母的組件狀態，我將handleChange函數作為道具傳遞給了FormUpdate組件

Answer 1

使用componentWillReceiveProps在您的表單組件

class Form extends React.Component {

    ...

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

    ...
}

這只會在數據可用后立即設置狀態一次，因為QueryRenderer僅在數據加載后調用一次render。