我有以下陣列：
[
"/test/static/media/its9-odc_d.9d5de720.png",
"/test/static/media/its9-odc_m.178c1879.png",
"/test/static/media/its9-odc_w.5e70ca59.png",
"/test/static/media/its9-odc_y.8cf41473.png"
]
當我單擊按鈕時_d，_m、_w或_y保存在 React 狀態 ( timeperiods)。
我需要一個函式來保存與我timeperiods在另一個 React 狀態 ( imageSource) 中匹配的字串，以便我可以渲染影像。
這是我到目前為止所嘗試的，但我總是被退回'yay'，當我嘗試時，setImageSource我收到無限回圈錯誤。
const imageForTimeperiod = () => {
images.forEach((img) => {
if (timeperiod && img.split('.')[0].includes(timeperiod)) {
console.log('yay');
// setImage(img);
}
})
};
{Object.entries(Timeperiods.timeperiods).map((entries) => {
return (
<Button onClick={() => setTimeperiod(entries[1].file)}>
{entries[0]}
</Button>
);
})}
到底：
我單擊 Button 1 Day，它將時間段設定為_d并顯示影像/test/static/media/its9-odc_d.9d5de720.png。
uj5u.com熱心網友回復：
您可以傳遞timeperiod單擊按鈕的名稱，然后根據名稱設定影像和 timePeriod 狀態。
const { useState } = React;
const App = () => {
const [image, setImage] = useState(null);
const [timePeriod, setTimePeriod] = useState(null);
const images = [
"/test/static/media/its9-odc_d.9d5de720.png",
"/test/static/media/its9-odc_m.178c1879.png",
"/test/static/media/its9-odc_w.5e70ca59.png",
"/test/static/media/its9-odc_y.8cf41473.png"
];
const timePeriods = ['_d', '_m', '_w', '_y'];
const handleClick = (v) => {
const foundImage = images.find(name => name.includes(v));
setImage(foundImage || null);
setTimePeriod(v);
}
return <div>
{timePeriod}
<br />
{image && <img src={image} />}
<br />
{timePeriods.map((v, i) => {
return (
<button onClick={() => handleClick(v)}>
{v}
</button>
)
})}
</div>
}
ReactDOM.render(
<App />,
document.getElementById("root")
)<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/377126.html
上一篇：C printf("%s",string)給了我非常奇怪的輸出
下一篇：Python中的重復欄位格式