Question

TL; DR： 在阅读了有关React和Relay的各种资源并通过使用react-relay构建原型应用程序之后，我遇到了一个我无法在没有帮助的情况下解决的问题。它是关于如何告诉变异要保存哪些数据。

我有一个显示User实体详细信息的组件。它是通过中继查询加载的。此组件包含一个<input />字段，其中包含用户名和一个触发relay.commitUpdate(...)调用的保存按钮。每当我在输入字段中更改用户名并单击“保存”时，我可以看到未更改但原始名称将发送到后端。

我正在使用react-relay构建应用，我正在开发一个组件，该组件应显示有关user实体的详细信息，可以更改这些数据并进行保存。它是Master-Detail-Pattern的详细部分。

加载和更改数据工作正常。但是更改不会被提交给后端。对于数据更新，我试图使用中继突变。

点击“保存”后，我可以在Chrome浏览器的开发者控制台中看到未更改的数据会发送到我的后端。我错过了什么？这是我到目前为止（打字稿代码）。

（更新：将断点放入组件的onSaveClick()方法和变异中的getVariables()方法时，我在onSaveClick中看到属性this.props.user包含在this.props.user中的getVariables()返回初始数据时进行了更改。）

＆＃13;

export interface IUserDetailsProps { user: User }
export interface IUserDetailsStates { user: User }

class UserDetails extends React.Component<IUserDetailsProps, IUserDetailsStates> {
  constructor(props: IUserDetailsProps) {
    super(props);
    this.state = { user: this.props.user };
  }
  
  public onFirstNameChange(event: any) {
    let user = this.state.user;
    this.state.user.firstName = event.target.value;
    this.props.user.firstName = event.target.value; // is this needed?
    this.setState({ user: user });
  }
  
  public onSaveClick() {
    this.props.relay.commitUpdate(new UserMutation({ user: this.props.user }));
  }

  public render(): JSX.Element {
    let user: User = this.props.user;
    return <div>
        <input type="text" value={user.firstName} onChange={this.onFirstNameChange.bind(this)} />
        <button onClick={this.onSaveClick}>Save</button>
      </div>;
  }
}

class UserMutation extends Relay.Mutation {
    public getMutation() {
        return Relay.QL`mutation {saveUser}`;
    }

    public getVariables() {
        return this.props.user;
    }

    public getFatQuery() {
        return Relay.QL`
            fragment on UserPayload {
                user {
                    id,
                    firstName
                }
            }
        `;
    }

    public getConfigs() {
        return [{
            type: "FIELDS_CHANGE",
            fieldIDs: {
                user: this.props.user.id
            }
        }];
    }

    static fragments = {
        user: () => Relay.QL`
            fragment on User {
                id,
                firstName
            }
        `
    }
}

export default Relay.createContainer(UserDetails, {
    fragments: {
        user: () => Relay.QL`
            fragment on User {
                id,
                firstName,
                ${UserMutation.getFragment("user")}
            }
        `
    }
});

＆＃13;

解决方案尝试：

我将用户名字的输入字段的行更改为：

<input type="text"
    ref={(ref) => {
        this.myTextBox = ref;
        ref.value = this.props.user.firstName;
}} />

并删除了更改事件处理程序并删除了所有state代码。

我的点击处理程序现在看起来像这样：

public onSaveClick() {
    let user = Object.assign({}, this.props.user);
    user.firstName = this.myTextBox.value;
    this.props.relay.commitUpdate(new UserMutation({user: user}));
}

我可以看到，传递给变异的用户对象现在具有我在文本输入中更改的firstName的新值。但是，中继再次将未更改的user发送到我的后端。这是一个显示我的问题的屏幕截图：

如何告诉中继更新数据集？

0 个答案: