javascript - 在 setVariables 之后 React 继电器挂起的变量总是为 null

Question

当我尝试设置变量时，组件仅在获取完成后更新。这是一个示例代码。

class RelayExample extends React.Component {
  setVars() {
    this.props.relay.setVariables({id: '2'});
  };
  render() {
    console.log(this.props.relay.pendingVariables);
    return (
      <div>
        <button onClick={this.setVars.bind(this)}>set variable</button>
      </div>
    );
  }
}

RelayExample = Relay.createContainer(RelayExample, {
  initialVariables: {
    id: '1'
  },
  fragments: {
    userStore: ()=> {
      return Relay.QL`
      fragment on userStore {
         user(id:$id){
          email
         }
      }
      `;
    }
  }
});

ReactDOM.render(
  <Relay.RootContainer Component={RelayExample} route={new TestQuery()}/>,
    document.getElementById('app')
);

当我按下按钮时，我在控制台中得到以下结果:

即使我在 setVariables 函数之后立即使用forceUpdate，我也会得到类似的结果。

setVars() {
        this.props.relay.setVariables({id: '2'});
        this.forceUpdate();
};

Answer 1

我相信这是有意的行为。

pendingVariables contains the set of variables that are being used to fetch the new props, i.e. when this.props.relay.setVariables() or this.props.relay.forceFetch() are called and the corresponding request is in flight.

If no request is in flight pendingVariables is null.

如果您在设置变量后立即控制台日志，您应该在 pendingVariables 中看到它们。