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>
應用程式.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;
我收到此錯誤“重新渲染太多。反應限制了渲染的數量以防止無限回圈。” 我不知道我在這里到底做錯了什么，誰能幫忙。為了幫助您理解：我創建了一個表單，我想從用戶那里獲取輸入（名稱和位置）并在不同的頁面上顯示該輸入。我嘗試集成 googleMaps API 以根據輸入顯示位置，并且整個代碼崩潰了，否則它之前作業正常，如果有人也可以在這里幫助我繪制地圖嗎？我一直在努力嘗試這樣做。我可以在不同的頁面上顯示地圖，但是當用戶在表單的輸入欄位中寫入任何位置時，我想在地圖上顯示位置，希望我有意義。
uj5u.com熱心網友回復：
看起來這條線每次渲染時都會呼叫 getData() ，然后undefined作為 prop 值傳遞：
<Route exact path="/" element={<Form getdata={getData()} />}></Route>
getData呼叫狀態設定器，這似乎很可能導致無限回圈。
我相信它應該改為使用：
getdata={getData}
uj5u.com熱心網友回復：
這是兩部分的問題。@JLRishe 回答了第一個問題。第二個問題是您的表單道具被呼叫getdata而不是，getData因此該函式不存在并且表單不起作用。
這是你的最終代碼
<Route exact path="/" element={<Form getData={getData} />}></Route>
你陷入回圈的原因是，當getData={getData()}你將函式的結果作為道具而不是函式發送時，給出表單道具。并且該函式會在每次渲染時進行計算，這會導致另一個渲染。
在這里剝離 Codepen
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/526974.html