React更改地图上的标签按钮

Question

我有个问题。这是我的代码：

import { useContext, useState, useEffect, useRef } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import CurrentUserContext from "../contexts/userContext";
import userAPI from "../services/userAPI";
export default function DisplayCameras() {
const [cameras, setCameras] = useState([]);
const [cool, setCool] = useState([]);
const [erreur, setErreur] = useState("");
const { user } = useContext(CurrentUserContext);
const navigate = useNavigate();
let arr = [];
const getCameras = () => {
userAPI.get("/api/cameras").then((response) => {
setCameras(response.data[0]);
});
};
// eslint-disable-next-line no-unused-vars
const deleteCamera = (id) => {
if (user) {
userAPI
.delete(`/api/cameras/${id}`)
.then(() => {
setCameras(
cameras.filter((data) => {
return data.id !== id;
})
);
toast.success("Camera supprimé avec succes");
})
.catch((err) => {
console.error(err);
});
} else toast.warning("Vous n'êtes pas connecté !");
};
const addCool = (cooler) => {
setErreur("");
console.warn("add Cooler");
arr.push(cooler);
console.warn("arr:", arr);
};
const reset = () => {
arr = [];
console.warn("arr reset:", arr);
setCool([]);
setErreur("");
};
const total = () => {
if (arr.length === 1) {
console.warn("ATTENTION 1 SEULE VALEUR AJOUTE");
setErreur("ATTENTION, 1 SEULE VALEUR AJOUTE");
}
if (arr.length === 0) {
console.warn("ATTENTION PAS DE VALEUR AJOUTE");
setErreur("ATTENTION, PAS DE VALEUR AJOUTE");
} else {
const calcul = arr.reduce((curr, acc) => {
return curr + acc;
});
setCool(calcul);
console.warn("total: ", calcul);
}
};
useEffect(() => {
getCameras();
}, []);
return (
<div>
<div>
<button type="submit" onClick={() => navigate("create-camera")}>
Créer une nouvelle camera
</button>
</div>
<div>
{cameras.map((data) => (
<div key={data.id}>
<p>{data.brand}</p>
<p>{data.cooler}</p>
<p>{data.cadence}</p>
<label htmlFor="cooler">cooler</label>
<button
type="button"
value="cooler"
onClick={() => addCool(data.cooler)}
>
toto
</button>
</div>
))}
</div>
<button type="button" onClick={total}>
Total
</button>
<button type="button" onClick={reset}>
Reset
</button>
<h2>{cool}</h2>
<p>{erreur}</p>
</div>
);
}

我想为每个单独的地图更改我的按钮标签(使用值冷却器(，但经过一些测试，我创建了一个更改所有按钮标签的状态，而不仅仅是一个：/

我尝试了很多没有运气的事情。。。我听说我必须为每个按钮创建一个状态？？

有人能帮我吗？

感谢

Answer 1

如果我正确理解您的问题，那么不幸的是React将不得不重新提交您在map方法中创建的所有JSX。

这是因为你没有改变数组中的一个元素(好吧，你是，但听我说完(，你正在改变整个数组(它的引用(。即使100个元素中有99个是相同的，但对于React来说，它是一个不同的数组，因此需要一个完整的重新应答器。

然而，您可以通过提取以下部分来改进代码：

<div key={data.id}>
<p>{data.brand}</p>
<p>{data.cooler}</p>
<p>{data.cadence}</p>
<label htmlFor="cooler">cooler</label>
<button
type="button"
value="cooler"
onClick={() => addCool(data.cooler)}
>
toto
</button>
</div>

例如Camera。

const Camera = memo(({ brand, cooler, cadence, onAddCool }) => {
return (
<div>
<p>{brand}</p>
<p>{cooler}</p>
<p>{cadence}</p>
<label htmlFor="cooler">cooler</label>
<button
type="button"
value="cooler"
onClick={() => onAddCool(cooler)}
>
toto
</button>
</div>
);
});
export default Camera;

并将其用于您的地图方法：

{cameras.map((data) => (
<Camera {...data} onAddCool={addCool} key={data.id} />
)}

现在，由于memo()包装了您的Camera组件，只有当它的任何道具发生变化时，才会重新渲染它。这意味着，即使cameras阵列是一个全新的阵列，只有一个元素发生了变化，也只能重新绘制单个相机组件(与阵列中一个变化的元素相关(。