import React, { useState } from "react";
import { Link } from "react-router-dom";

const Form = (props) => {
  const [submit, setSubmit] = useState(false);

  const [inputData, setInputData] = useState({
    firstname: "",
    location: ""
  });

  const InputHandle = async (event) => {
    setInputData({ ...inputData, [event.target.name]: event.target.value });
  };
return (
    <div>
      <form id="form" method="GET">
        <div className="inputs">
          <label for="firstname"> First Name</label>
          <input
            type="text"
            id="firstname"
            name="firstname"
            onChange={InputHandle}
          ></input>
        </div>
<div className="inputs">
          <label for="location">User accessing application from</label>
          <input
            type="text"
            id="location"
            name="location"
            onChange={InputHandle}
          ></input>
          <Link to="/dashboard">
            <button
              type="submit"
              className="btn"
              onClick={() => {
                props.getData(inputData);
              }}
            >
              Submit
            </button>
          </Link>
        </div>
      </form>
    </div>

App.js

import Dashboard from "./components/Dashboard";
import Form from "./components/Form";

import "./App.css";
import {
  BrowserRouter as Router,
  Switch,
  Routes,
  Route,
  Link,
} from "react-router-dom";
import { useState } from "react";

function App() {
  const [data, setData] = useState({});

  const getData = (inputData) => {
    setData(inputData);
  };

  return (
    <Router>
      <div className="App">
        <Routes>
          <Route exact path="/" element={<Form getdata={getData()} />}></Route>
          <Route
            exact path="/dashboard" element={<Dashboard data={data} />}
          ></Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;

我得到这个错误“太多的重新渲染。react限制渲染的数量以防止无限循环。”我不知道我到底做错了什么，有人可以帮助吗。为了帮助你理解：我已经创建了一个表单，希望在其中输入（名称和位置），并在不同的页面上显示输入。我试图集成GoogleMaps API来根据输入显示位置，但整个代码崩溃了，否则它早些时候工作得很好，还有，如果有人能帮我在这里的Map太多？我一直在撞我的头试图这样做。我可以在不同的页面上显示Map，但我希望当用户在表单的输入字段中输入任何位置时，显示Map上的位置，希望我能理解。