我得到以下錯誤。React Error: "渲染的鉤子比前一次渲染時多"，這是因為在我渲染的映射陣列中，按鈕有自己的useState鉤子。
所以我有一個專案陣列，我從一個串列中渲染。最初，只有3個專案被顯示出來，而點擊一個按鈕將加載整個串列。
問題是，在專案內部可以有多個ProjectButtons，而這些ProjectButtons是組件，因為我想使用useState鉤子使用特殊的懸停狀態。
但是當我改變正在呈現的專案串列的大小時，由于ProjectButton組件內的useState鉤子，它拋出一個錯誤。
span class="hljs-keyword">import { projects } from "./lib/projectList"。
const Projects: FC = () =>/span> {
//最初使用陣列的一部分。
const [projectArray, setProjectArray] = useState（ projects. slice(0, 3)）。)
//在點擊按鈕時加載整個陣列。
const loadMoreProjects = (/span>) => {
setProjectArray（[...projects]）。
}
const ProjectButton = (button: { type: string, link: string }) => {
//洗掉這個useState鉤子可以解決這個問題，但我的設計需要它。
const [hoverColor, setHoverColor] = useState("#0327d8"/span>)。
const handleMouseEnter = (/span>) => {
setHoverColor("white"/span>)。
}
const handleMouseLeave = (/span>) => {
setHoverColor(原始)。
}
return (
<a href={button. link} rel="noreferrer" target="_blank" key={button. link}>
< button onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} >
< WebsiteIcon className="projectButtonIcon" fill={hoverColor} />
<p>{button.type}</p>
</button>/span>
</a>/span>
);
}
return projectArray.map(project => (
...
<div className="projectLinks"/span>>
{project.buttons.map(button => ProjectButton(button))}。
</div>
...
<Button onClick={loadMoreProjects}>Load More</Button>。
));
}
uj5u.com熱心網友回復：
你在你的Projects組件中定義了ProjectButton，所以你破壞了鉤子的規則--特別是"只在最高層呼叫鉤子"。
將ProjectButton組件移出Projects的范圍，它就會很高興。
uj5u.com熱心網友回復：
這是因為你在一個函式中使用鉤子，而它應該直接在一個組件中使用。
如果你把ProjectButton創建為一個組件而不是函式，這個問題就可以解決了。
以下是更新的代碼：
import { projects } from "./lib/projectList"。
const ProjectButton=（button）=> {
//洗掉這個useState鉤子可以解決這個問題，但我的設計需要它。
const [hoverColor, setHoverColor] = useState("#0327d8"/span>)。
const handleMouseEnter = (/span>) => {
setHoverColor("white"/span>)。
};
const handleMouseLeave = (/span>) => {
setHoverColor(原始)。
};
return (
<a href={button. link} rel="noreferrer" target="_blank" key={button. link}>
< button onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} >
< WebsiteIcon className="projectButtonIcon" fill={hoverColor} />
<p>{button.type}</p>
</button>/span>
</a>/span>
);
};
const Projects: FC = () =>/span> {
//最初使用陣列的一部分。
const [projectArray, setProjectArray] = useState（ projects. slice(0, 3)）。)
//在點擊按鈕時加載整個陣列。
const loadMoreProjects = (/span>) => {
setProjectArray（[...projects]）。
}
return projectArray.map(>project => (
...
<div className="projectLinks"/span>>
{project.buttons.map((button) => (
<ProjectButton {...button}。/>
))}
</div>
...
<Button onClick={loadMoreProjects}>Load More</Button>。
));
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/324506.html
標籤：