时间戳

首页 > 解决方案 > 如何使用 geolocation api 将用户位置保存在 react js 状态？

javascript - 如何使用 geolocation api 将用户位置保存在 react js 状态？

问题描述

实际上，我使用react-hook-geolocation包成功获取了坐标，但这里的问题是我不知道如何将其添加到当前状态。我想在用户提交表单时保存用户的位置，然后将用户字段和坐标组合到一个 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);

标签： javascriptreactjsstate

解决方案

如果需要将两个对象组合在一起，可以使用 Spread 运算符：

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

推荐阅读