Html 从React HOOK GET映射DOM节点

Html 从React HOOK GET映射DOM节点,html,reactjs,react-hooks,ref,Html,Reactjs,React Hooks,Ref,事先为我的问题措词不当表示歉意 我遵循了MERN教程,该教程全部使用基于类的React组件完成。我试图将其转换为带有挂钩的功能组件 我很难从最初的GET请求中保存用户/用户名,然后将它们映射到一个html select表单,这样新表单提交就可以归属于一个现有用户 以下是教程代码的外观,其功能与预期一致: import React, { Component } from 'react'; import axios from 'axios'; import DatePicker from 'reac

事先为我的问题措词不当表示歉意

我遵循了MERN教程,该教程全部使用基于类的React组件完成。我试图将其转换为带有挂钩的功能组件

我很难从最初的GET请求中保存用户/用户名,然后将它们映射到一个html select表单,这样新表单提交就可以归属于一个现有用户

以下是教程代码的外观,其功能与预期一致:

import React, { Component } from 'react';
import axios from 'axios';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

export default class CreateRide extends Component {
  constructor(props) {
    super(props);

    this.onChangeUsername = this.onChangeUsername.bind(this);
    this.onChangeDescription = this.onChangeDescription.bind(this);
    this.onChangeDuration = this.onChangeDuration.bind(this);
    this.onChangeDistance = this.onChangeDistance.bind(this);
    this.onChangeDate = this.onChangeDate.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
      username: '',
      description: '',
      duration: 0,
      distance: 0,
      date: new Date(),
      users: []
    }
  }

  componentDidMount() {
    axios.get('http://localhost:5000/users/')
      .then(response => {
        if (response.data.length > 0) {
          this.setState({
            users: response.data.map(user => user.username),
            username: response.data[0].username
          });
        }
      })
      .catch((error) => {
        console.log(error);
      })
  }

  onChangeUsername(e) {
    this.setState({
      username: e.target.value
    });
  }

  onChangeDescription(e) {
    this.setState({
      description: e.target.value
    });
  }

  onChangeDuration(e) {
    this.setState({
      duration: e.target.value
    });
  }

  onChangeDistance(e) {
    this.setState({
      distance: e.target.value
    });
  }

  onChangeDate(date) {
    this.setState({
      date: date
    });
  }

  onSubmit(e) {
    e.preventDefault();

    const ride = {
      username: this.state.username,
      description: this.state.description,
      duration: this.state.duration,
      distance: this.state.distance,
      date: this.state.date
    };

    console.log(ride);

    axios.post('http://localhost:5000/rides/add', ride)
    .then(res => console.log(res.data));

    window.location = '/';
  }


  render() {
    return (
      <div>
        <h3>Create New Ride Log</h3>
        <form onSubmit={this.onSubmit}>
          <div className="form-group">
            <label>Username: </label>
            <select ref="userInput"
              required
              className="form-control"
              value={this.state.username}
              onChange={this.onChangeUsername}>
              {
                this.state.users.map(function (user) {
                  return <option
                    key={user}
                    value={user}>{user}
                  </option>;
                })
              }
            </select>
          </div>
          <div className="form-group">
            <label>Description: </label>
            <input type="text"
              required
              className="form-control"
              value={this.state.description}
              onChange={this.onChangeDescription}
            />
          </div>
          <div className="form-group">
            <label>Duration (in minutes): </label>
            <input
              type="text"
              className="form-control"
              value={this.state.duration}
              onChange={this.onChangeDuration}
            />
          </div>
          <div className="form-group">
            <label>Distance (in miles): </label>
            <input
              type="text"
              className="form-control"
              value={this.state.distance}
              onChange={this.onChangeDistance}
            />
          </div>
          <div className="form-group">
            <label>Date: </label>
            <div>
              <DatePicker
                selected={this.state.date}
                onChange={this.onChangeDate}
              />
            </div>
          </div>

          <div className="form-group">
            <input type="submit" value="Create Ride Log" className="btn btn-primary" />
          </div>
        </form>
      </div>
    )
  }
}
在HTML中,我正在努力概念化ref='userInput'如何在第一个表单组中使用。使用功能组件会导致不允许字符串引用的错误


我知道这包含了不止一个问题,但我很忙,如果您有任何问题,我们将不胜感激。

请按顺序回答您的问题:

1。用户数据:您正在对象中设置用户数据:

setUsers({ users: response.data.map(user => user.username ) });
setUsername({ username: response.data[0].username });
这应该是:

setUsers(response.data.map(user => user.username));
setUsername(response.data[0].username);

2。Refs:看起来您在原始基于类的代码中没有使用该ref,您应该能够删除它。如果您确实需要对
select
元素的引用,您可以使用
useRef
钩子,这里的文档:

我已经有一天左右没有碰过这个项目了,因为我对这个路障感到沮丧。非常感谢你的帮助!你真的让我开脱了。很高兴听到你这么说!
setUsers({ users: response.data.map(user => user.username ) });
setUsername({ username: response.data[0].username });
setUsers(response.data.map(user => user.username));
setUsername(response.data[0].username);