javascript - 重新渲染次数过多。即使功能正常，react 也会限制渲染次数以防止无限循环

Question

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 上显示位置，希望我有意义。

Answer 1

这是由两部分组成的问题。第一个问题由@JLRishe 回答。第二个问题是您的表单 Prop 被称为 getdata 而不是 getData，因此该函数不存在并且表单无法运行。

这是您的最终代码

<Route exact path="/" element={<Form getData={getData} />}></Route>

您陷入循环的原因是，将表单 Prop 提供为 getData={getData()} 您将将该函数的结果作为 Prop 而不是函数发送。该函数对每个渲染进行计算，这会导致另一个渲染。

在此处精简 Codepen