Javascript 如何使用地理位置api在react js状态下保存用户位置？

实际上，我正在使用包成功地获得坐标，但这里的问题是我不知道如何将其添加到当前状态。我想在提交表单时保存用户的位置，然后将用户字段和坐标合并到一个formData对象中

这是完整的代码

import React, { useState } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { addVisit } from "../../actions/lead";
import Spinner from "../layout/Spinner";
import useGeolocation from "react-hook-geolocation";

const initialState = {
  status: "",
  email: "",
  commentBox: "",
};

const VisitForm = ({ leadId, addVisit, lead: { lead, loading } }) => {
  const geolocation = useGeolocation();

  const [formData, setFormData] = useState(initialState);
  const { status, email, commentBox } = formData;

  const onChange = (e) =>
    setFormData({ ...formData, [e.target.name]: e.target.value });

  const onSubmit = (e) => {
    var coords = {
      lat: geolocation.latitude,
      lng: geolocation.longitude,
    };
    console.log(coords);
    e.preventDefault();
    //addVisit(leadId, formData);
    setFormData(initialState);
  };
  return loading || lead === null ? (
    <Spinner />
  ) : (
    <div className="post-form">
      <div className="bg-primary p">
        <h3>Add a Visit</h3>
      </div>
      <form className="form my-1" onSubmit={onSubmit}>
        <select name="status" value={status} onChange={onChange}>
          <option value="0">* Select Lead Status</option>
          <option value="Met">Met</option>
          <option value="Not_met">Not met</option>
          <option value="Close_Lead">Close Lead</option>
          <option value="Done">Done</option>
        </select>
        <div className="form-group">
          <select
            className="form-group"
            name="email"
            value={email}
            onChange={onChange}
          >
            <option value="0">* Select Person</option>
            {lead.personDetails.map((person) => (
              <option key={person._id} value={person.email}>
                {person.name}
              </option>
            ))}
          </select>
        </div>
        <textarea
          name="commentBox"
          cols="30"
          rows="5"
          placeholder="Any additional Comment"
          value={commentBox}
          onChange={onChange}
        />
        <input type="submit" className="btn btn-dark my-1" value="Submit" />
      </form>
    </div>
  );
};

const mapStateToProps = (state) => ({
  auth: state.auth,
  lead: state.lead,
});

VisitForm.propTypes = {
  addVisit: PropTypes.func.isRequired,
  lead: PropTypes.object.isRequired,
};

export default connect(mapStateToProps, { addVisit })(VisitForm);

---

如果需要将两个对象组合在一起，可以使用“扩展”操作符：

const onSubmit = (e) => {
    const coords = {
      lat: geolocation.latitude,
      lng: geolocation.longitude,
    };
    const newData = {...formData, ...coords}
    setFormData(newData)
    addVisit(leadId, newData);
  };

---

事实上，我也尝试过你提到的方法，但它对我不起作用，它只是发送原始的formData对象而不复制coords。发送到哪里？formData状态将同时获得原始对象属性和坐标。如果您试图在相同的方法中使用formData，则是错误的，因为状态不会立即更新，并且只有在重新加载后才会更新。您应该在请求中使用{…formData，…coords}，而不是。如果有帮助的话，我会更新答案。请原谅我的语言，我应该说返回而不是发送，你的新编辑工作正常。谢谢。