Question

专家！

我使用react进行Web服务。

我想创建页面来修改用户信息。

我可以接收用户数据并将数据设置为输入值。

但是，反应会发出警告。

警告：组件正在更改要控制的文本类型的不受控制的输入。 ~~

我想。我做错事情了。何时componentDidMount()。

我想知道如何使用异步数据初始化表单数据。

抱歉我英语能力差。

此代码是我的代码的一部分。

＆＃13;

export class UpdatedUser {
  @observable private _name: string;
  @observable private _phone: string;
  @observable private _email: string;
  
  // skip setters, getters.
}

interface MyPageComponentProps extends RouteComponentProps<{}> {
  global?: GlobalService;
}

interface MyPageComponentState {
  user: UpdatedUser;
}

@inject('global')
@observer
class MyPageComponent extends React.Component<MyPageComponentProps, MyPageComponentState> {
  constructor(props: MyPageComponentProps) {
    super(props);
    this.state = {
      user: new UpdatedUser(),
    };
  }

  componentDidMount() {
    if (this.props.global) {
      userService.getUser(this.props.global.loginedInfo.idx + '').subscribe((res: any) => {
        if (res.result === 'success') {
          this.setState((prev: MyPageComponentState) => ({
            user: update(prev.user, {$set: {
              name: res.memberInfo.name,
              phone: res.memberInfo.phone,
              email: res.memberInfo.email,
            } as UpdatedUser})
          }));
        } else {
          alert(res.msg);
        }
      });
    }
  }

  render() {
    return (
      <form className="user-info" onSubmit={this.updateUser}>
        <h3 className="title">Modify User Info</h3>
        <div className="form-group">
          <label htmlFor="name" className="form-label">name</label>
          <input type="text" id="name" className="form-control" value={this.state.user.name} onChange={this.onChangeInfo} />
        </div>
        <div className="form-group">
          <label htmlFor="phone" className="form-label">phone</label>
          <input type="text" id="phone" className="form-control" value={this.state.user.phone} onChange={this.onChangeInfo} />
        </div>
        <div className="form-group">
          <label htmlFor="email" className="form-label">email</label>
          <input type="text" id="email" className="form-control" value={this.state.user.email} onChange={this.onChangeInfo} />
        </div>
        <div className="btn-group">
          <button type="submit" className="btn raised primary">수정</button>
          <button className="btn raised secondary" onClick={() => this.props.history.goBack()}>취소</button>
        </div>
      </form>
    );
  }

export default MyPageComponent;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

Answer 1

您收到的警告是关于受控和不受控制的组件。基本上，您可以使用public function getGender(): ?string，input和textarea等元素，这些元素的状态处于React组件的内部状态，或者保留在DOM中。

在您的代码中，您将UpdatedUser信息保持在本地状态，并使用select和value传播其数据，因此您控制输入。但是，你的onChange回调在哪里？它不存在。尝试将该方法添加到您的类，它应该工作。请查看有关controlled components

的文档

替代方法是uncontrolled inputs，在这种情况下，您需要将onChange道具传递给您的输入而不是defaultValue和value，如下所示：< / p>

onChange

如果<input defaultValue="Bob" type="text" ref={(input) => this.input = input} />方法被触发，您只需从updateUser元素中获取新值：

ref

如何使用异步数据初始化表单数据

1 个答案: