我有一個顯示專案的地圖功能：
{data.map((item, index) => ())}
在這個函式中，我希望有一個 onClick，當加載為真時有條件地顯示加載狀態。
const [loading, setLoading] = useState(false)
{data.map((item, index) => (
<span
onClick={() =>
handleDelete()}>
{loading ? (
<LoadingSpinner />
) : (
<TrashIcon />)}
</span>
))}
當我這樣做時，它會導致串列中的所有專案顯示加載狀態，而不僅僅是單擊的專案。
有沒有辦法可以使用索引來實作這一點？
uj5u.com熱心網友回復：
您的所有地圖項都在偵聽單個布爾狀態值，相反，您可以跟蹤單擊項的索引，或者如果您希望能夠單擊并顯示多個項的加載狀態，您可以使用陣列或放。
下面是使用Set的方法
const [loadingIndices, setLoadingIndices] = useState(new Set());
{data.map((item, index) => (
<span
onClick={() =>
handleDelete(index)}>
{loadingIndices.has(index) ? (
<LoadingSpinner />
) : (
<TrashIcon />)}
</span>
))}
現在在您的 handleDelete 函式中，您可以將單擊元素的索引添加到狀態集。
handleDelete = (selectedIndex) => {
setLoadingIndices((prev) => new Set([...prev, selectedIndex]));
// ...
// ...
// And to remove the element from loading state
setLoadingIndices((prev) => {
const updated = new Set(prev);
updated.delete(selectedIndex);
return updated;
});
};
uj5u.com熱心網友回復：
您應該將您的狀態移動到專案而不是父項。更新父組件內部的狀態將導致所有子組件重新渲染。
const childComponent = (props) => { // you can pass the main loading state as a starting point
const [loading,setLoading] = useState(props.loading) // initial loader state
if(loading) return <LoadingSpinner />
return (
<button onClick={()=> setLoading(prev => !prev)} />
)}
然后，您可以使用上面的 if 陳述句對其進行變異以顯示不同的元素。
uj5u.com熱心網友回復：
如果您不介意孩子的重新渲染，您可以使用此索引邏輯。
const [loading, setLoading] = useState(null);
const handleDelete = (index) => {
setLoading(index);
}
{data.map((item, index) => (
<span
onClick={() =>
handleDelete(index)}>
{loading === index ? (
<LoadingSpinner />
) : (
<TrashIcon />)}
</span>
))}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/475713.html
標籤：javascript 反应