我有一小段反應代碼，它呈現姓名串列及其相關資訊，如年齡和電子郵件地址。代碼編譯得很好，但我看到資料在頁面上呈現了兩次。這是我呼叫組件的方式：
const peopleData : Person[] = [{id:1,name:"John",age:22},{id:2,name:"Sasha",age:23}]
function App() {
return (
<div className="App">
<Basic {...peopleData}/>
</div>
);
}
這是組件：
export interface Person {
id : number;
name : string;
age : number;
email? : string;
}
function Basic(input: Person[]) {
let newPeopleData : Person[] = [];
const [data,setData] = useState<Person[]>([]);
useEffect(()=>{
// Create a new data array
let data : Person[] = Object.values(input);
let size : number = Object.values(input).length;
console.log("Data load start." JSON.stringify(data));
for(let index=0;index<size;index )
{
let {id,name,email} = input[index] as Person;
let newEmail = name "@gmail.com"
newPeopleData.push({id:id,name:name,email:newEmail} as Person)
}
setData(newPeopleData);
console.log("Data loaded." JSON.stringify(data));
return ()=>{
console.log("Data deleted." JSON.stringify(data));
}
},[]);
return (
<div>
{data.map((unit)=>{
return (
<h1 key={unit.id}>{unit.name},age:{unit.age},email:{unit.email}</h1>
)
})}
</div>
)
}
我有兩個問題：
- “peopleData”陣列是否正確傳遞給組件？或者有更好的推薦方法嗎？
- 為什么瀏覽器在重繪 時會渲染兩次資料，盡管“unit.id”對于每個資料集都是唯一的。
謝謝
我試圖洗掉 h1 標記內的 key 屬性，認為 React 可以為每個地圖物件分配自己的唯一 ID。但這也不起作用。
uj5u.com熱心網友回復：
- React 使用道具，正確的是：
<Basic data={peopleData}/>
在組件中：
interface Props {
data: Person[]
}
function Basic({data}: Props) {}
- 在控制臺資料中渲染兩次，因為在索引中反應使用嚴格模式
<React.StrictMode>
uj5u.com熱心網友回復：
在 useEffect 中移動陣列變數
useEffect(() => {
// move the variable inside as useEffect runs twice in dev strict mode
// to help catch such error
let newPeopleData : Person[] = [];
// Create a new data array
let data : Person[] = Object.values(input);
let size : number = Object.values(input).length;
console.log("Data load start." JSON.stringify(data));
for(let index=0;index<size;index )
{
let {id,name,email} = input[index] as Person;
let newEmail = name "@gmail.com"
newPeopleData.push({id:id,name:name,email:newEmail} as Person)
}
setData(newPeopleData);
console.log("Data loaded." JSON.stringify(data));
return ()=>{
console.log("Data deleted." JSON.stringify(data));
}
},[]);
我想知道道具是如何通過的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/532895.html
標籤：反应打字稿字典双倍的渲染
下一篇：如何在json中提取字典中的資訊