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

Question

专家！

我使用react进行Web服务。

我想制作页面来修改用户信息。

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

但是，反应发生了警告。

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

我认为。我做错事情了。当componentDidMount()。

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

抱歉我英语能力差。

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

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;

<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>

Answer 1

您收到的警告是关于受控和不受控制的组件。基本上，您可以使用input，textarea和select等元素，这些元素具有React组件内部状态或将其保存在DOM中。

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

另一种方法是使用uncontrolled inputs，在这种情况下，你需要将defaultValue道具传递给你的输入而不是value和onChange，如下所示：

    <input
      defaultValue="Bob"
      type="text"
      ref={(input) => this.input = input}
    />

如果updateUser方法被触发，您只需从ref元素中获取新值：

updateUser(event) {
    event.preventDefault()
    console.log('New value: ' + this.input.value)
    this.props.onSubmit(this.input.value)
}