mysql - 在 React 和 Node 中，如何让 Formik 用我的 mySQL 表用户的数据填充字段？

Question

我一直在尝试使用 mySQL 数据库表“用户”中的数据填充 Formik 表单上的字段：用户名、密码和电子邮件。例如，数据库表'user'中的第一个条目是：id：1，用户名：Tim，密码：1234，email：[e-mail]。一旦用户单击 UsersList 组件中的“更新”并将其路由到表单，我希望我的 Formik 表单中包含这些数据。

这是相关的服务器代码：

app.get('/users/:id', (req,res) => {
  db.query("SELECT * FROM user WHERE id='$id'",(err, results) => {
    if(err) throw err;
    res.json(results);
  });
});

这是我的用户组件：

class Users extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // id: this.props.match.params.id,
      // username: "",
      // password: "",
      // email: "",
      users: [],
      isLoading: true
    };
    this.onSubmit = this.onSubmit.bind(this);
    this.validate = this.validate.bind(this);
  }
  getUsers() {
    axios
      .get("http://localhost:3000/users/:id")
      .then((response) =>
        response.data.results.map((users) => ({
          username: `${users.username}`,
          password: `${users.password}`,
          email: `${users.email}`,
        }))
      )
      .then((users) => {
        this.setState({
          users,
          isLoading: false,
        });
      })
      .catch((error) => this.setState({ error, isLoading: false }));
  }
  componentDidMount() {
   this.getUsers();
  }

  validate(values) {
    let errors = {};

    if (!values.username) {
      errors.username = "Enter a username";
    } else if (values.username.length < 3) {
      errors.username = "Username must be at least 3 characters";
    }

    if (!values.password) {
      errors.password = "Enter a password";
    }

    if (!values.email) {
      errors.email = "Enter an email address";
    }

    return errors;
  }

  onSubmit(values) {
    let username = AuthenticationService.getLoggedInUsername();

    let user = {
      id: this.state.id,
      username: values.username,
      password: values.password,
      email: values.email,
    };
    console.log(values);

    if (this.state.id === -1) {
      UserDataService.createUser(username, user).then(() =>
        this.props.history.push("/users")
      );
    } else {
      UserDataService.updateUser(username, this.state.id, user).then(() =>
        this.props.history.push("/users")
      );
    }
    console.log("values: " + values);
  }

  render() {
    let { users } = this.state;
    console.log("user: " + users);
    return (
      <div>
        <h1>User Updates</h1>
        <div className="container">
          <Formik
            initialValues={{ users }}
            onSubmit={this.onSubmit}
            validateOnChange={false}
            validateOnBlur={false}
            validate={this.validate}
            enableReinitialize={true}
          >
            {(props) => (
              <Form>
                <ErrorMessage
                  name="username"
                  component="div"
                  className="alert alert-danger"
                />
                <ErrorMessage
                  name="password"
                  component="div"
                  className="alert alert-danger"
                />
                <ErrorMessage
                  name="email"
                  component="div"
                  className="alert alert-danger"
                />

                <fieldset className="form-group">
                  <label>Username</label>
                  <Field className="form-control" type="text" name="username" />
                </fieldset>
                <fieldset className="form-group">
                  <label>Password</label>
                  <Field className="form-control" type="text" name="password" />
                </fieldset>
                <fieldset className="form-group">
                  <label>Email Address</label>
                  <Field className="form-control" type="email" name="email" />
                </fieldset>
                <button className="btn btn-success" type="submit">
                  Save
                </button>
              </Form>
            )}
          </Formik>
        </div>
      </div>
    );
  }
}

export default Users;

标签： mysqlreactjsformik