提问人:Matsumoto 提问时间:11/17/2023 最后编辑:Matsumoto 更新时间:11/17/2023 访问量:48
我的按钮需要双击才能增加或减少索引
My buttons requires double click for increase or decrease index
问:
我有一个问题。我想使用按钮交互来更新我的组件。但是我必须双击这些按钮。我该如何解决这个问题?我正在添加我的浏览器控制台结果。首次单击不会更改索引。我看到了一些关于造型的解决方案。其实我不知道是什么原因。
这是我的代码:
function WeeklyForecast({data}) {
const [selectedDayIndex, setSelectedDayIndex] = useState(1);
const [selectedWeek, setSelectedWeek] = useState("current")
if (!data) {
return <div>Loading...</div>;
}
var days = Object.keys(data.current);
const prevClick = () => {
if(selectedDayIndex > 0){
setSelectedDayIndex(selectedDayIndex - 1);
}
switch (selectedDayIndex) {
case 0:
days = Object.keys(data.previous)
setSelectedWeek("previous")
break;
case 1:
days = Object.keys(data.current);
setSelectedWeek("current")
break;
case 2:
days = Object.keys(data.next);
setSelectedWeek("next")
break;
default:
break;
}
console.log(selectedDayIndex);
};
const nextClick = () => {
if(selectedDayIndex < Object.keys(data).length - 1){
setSelectedDayIndex(selectedDayIndex + 1);
}
switch (selectedDayIndex) {
case 0:
days = Object.keys(data.previous)
setSelectedWeek("previous")
break;
case 1:
days = Object.keys(data.current);
setSelectedWeek("current")
break;
case 2:
days = Object.keys(data.next);
setSelectedWeek("next")
break;
default:
break;
}
console.log(selectedDayIndex);
};
return (
<div className='WeeklyForecast'>
<div className="Prev-Btn">
<button onClick={prevClick}><</button>
</div>
<div className="Forecast-List">
{days.map((day, index) => (
<div key={index}>
<p>{day}</p>
<p>${data[selectedWeek][day].type}</p>
<p>${data[selectedWeek][day].degree}°</p>
</div>
))}
</div>
<div className="Next-Btn">
<button onClick={nextClick}>></button>
</div>
</div>
);
}
export default WeeklyForecast
还有我的控制台结果双击下一步按钮(默认值为1,第一次点击不更改值):
这是我的数据:
"weeklyWeather": {
"previous": {
"sunday": {
"type": "sunny cloudy",
"degree": "18"
},
"monday": {
"type": "sunny cloudy",
"degree": "19"
},
"tuesday": {
"type": "sunny",
"degree": "24"
},
"wednesday": {
"type": "rainy",
"degree": "15"
},
"thursday": {
"type": "sunny rainy",
"degree": "18"
},
"friday": {
"type": "thunder",
"degree": "14"
},
"saturday": {
"type": "sunny",
"degree": "16"
}
},
"current": {
"sunday": {
"type": "thunder",
"degree": "18"
},
"monday": {
"type": "sunny cloudy",
"degree": "24"
},
"tuesday": {
"type": "sunny cloudy",
"degree": "25"
},
"wednesday": {
"type": "rainy",
"degree": "14"
},
"thursday": {
"type": "sunny rainy",
"degree": "19"
},
"friday": {
"type": "thunder",
"degree": "13"
},
"saturday": {
"type": "sunny",
"degree": "18"
}
},
"next": {
"sunday": {
"type": "sunny",
"degree": "25"
},
"monday": {
"type": "sunny",
"degree": "26"
},
"tuesday": {
"type": "sunny cloudy",
"degree": "24"
},
"wednesday": {
"type": "rainy",
"degree": "21"
},
"thursday": {
"type": "sunny rainy",
"degree": "22"
},
"friday": {
"type": "thunder",
"degree": "17"
},
"saturday": {
"type": "sunny",
"degree": "18"
}
}
}
答:
0赞
AKX
11/17/2023
#1
根本原因是,在你这样做之后,该函数内部还没有改变(过时的关闭)。setSomething(something + 1);
something
但是,您的组件实际上简化为如下所示的内容。
我冒昧地重命名,因为它看起来真的像是一个星期选择器(上一个/当前/下一个),而不是一个日索引。由于状态始终直接从索引派生,因此它根本不应该是状态,而是一个简单的变量;如果计算更复杂,则可以使用 ,但由于它只是一个数组查找,因此这很好。selectedDayIndex
selectedWeek
useMemo()
const days = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
export default function WeeklyForecast({ data }) {
const [selectedWeekIndex, setSelectedWeekIndex] = React.useState(1);
if (!data) return <>Loading...</>;
const prevClick = () => setSelectedWeekIndex((i) => Math.max(i - 1, 0));
const nextClick = () => setSelectedWeekIndex((i) => Math.min(i + 1, 2));
const selectedWeekKey = ["previous", "current", "next"][selectedWeekIndex];
const selectedWeekData = data[selectedWeekKey];
return (
<div className="WeeklyForecast">
<div className="Prev-Btn">
<button onClick={prevClick}><</button>
</div>
<div className="Forecast-List">
{selectedWeekKey}<br />
{days.map((day) => (
<div key={day}>
<p>{day}</p>
<p>${selectedWeekData[day].type}</p>
<p>${selectedWeekData[day].degree}°</p>
</div>
))}
</div>
<div className="Next-Btn">
<button onClick={nextClick}>></button>
</div>
</div>
);
}
评论
data
selectedDayIndex