javascript - 重新渲染太多
问题描述
我得到很多重新渲染错误
我尝试使用 useEffect 仅在天气变化时渲染
function DashboardHeaderContent({ looks, weather }) {
const [seasonRange, setSeasonRange] = React.useState();
function renderLook(look) {
return <Look id={look._id} img={look.img} title={look.title} />;
}
if (weather.temp >= 7 && weather.temp <= 16) {
setSeasonRange("Spring");
} else if (weather.temp >= 16 && weather.temp <= 50) {
setSeasonRange("Sommer");
} else if (weather.temp >= 6 && weather.temp <= 18) {
setSeasonRange("Fall");
} else if (weather.temp <= 7) {
setSeasonRange("Winter");
}
状态应根据 weather.temp 设置
解决方案
您可以使用带有空数组的 useEffect() 作为第二个参数,以防止它观察任何状态。所以它基本上只会运行一次。
function DashboardHeaderContent({ looks, weather }) {
const [seasonRange, setSeasonRange] = React.useState();
function renderLook(look) {
return <Look id={look._id} img={look.img} title={look.title} />;
}
useEffect(() => {
if (weather.temp >= 7 && weather.temp <= 16) {
setSeasonRange("Spring");
} else if (weather.temp >= 16 && weather.temp <= 50) {
setSeasonRange("Sommer");
} else if (weather.temp >= 6 && weather.temp <= 18) {
setSeasonRange("Fall");
} else if (weather.temp <= 7) {
setSeasonRange("Winter");
}
}, []);
推荐阅读
- javascript - 如何指定 Web MIDI 通道?
- vim - 在映射中使用“z=”
- jasmine - 说 Jasmine spy 没有被调用,但我可以看到它被调用
- security - OAuth 2.0 - 为什么同意屏幕不需要客户端密码?
- python - 按列排序和选择,同时在 python 中保留原始索引
- reactjs - history.push(path) 在 react-router-dom v4 中不起作用,在重定向到 404 时使用 redux
- python - 如何使用 python3 修改传入的 HTTPS 和 HTTP 请求
- ios - 如何在 collectionView 单元格中设置 NSLayoutConstraint 常量?
- deep-learning - 如何在不混合批次中项目元素的情况下重塑pytorch矩阵
- arrays - 如何在golang中增加数组或切片中的所有元素