實際上，我想按順序顯示此名稱，但是每當我單擊遞增按鈕時，訂單（在 useState 中）都會遞增 1，但是當我第一次單擊遞減按鈕時，訂單再次遞增 1，然后小于 1。
function func() {
let [getVal, setVal] = useState({
alerts: "no alerts",
order: 0,
});
let Names = [
"Default",
"Evil laugh",
"classic alarm",
"Pause",
"intro music",
"Got item",
"Old bounce",
"bark",
"alarm tone",
];
function slider(e) {
let { order } = getVal,
value = e.target.id,
total = Names.length;
if (value === "up" && order !== total - 1) {
setVal((rest) => ({ ...rest, order:order 1 }));
} else if (value === "down" && order !== 0) {
setVal((rest) => ({ ...rest, order: order - 1 }));
}
setVal((rest) => ({ ...rest, alerts: Names[order] }));
}
return (
<>
<button
onClick={slider}
id="up"
>
up
</button>
<p>
{getVal.alerts}
</p>
<button
onClick={slider}
id="down"
>down
</button>
</>
)
}
uj5u.com熱心網友回復：
您需要在slider()函式中進行以下更改。它將解決您的問題。
在 react 中更新狀態是一個異步任務。你在 if 條件的內部和外部都這樣做了。這就是為什么它沒有在第一次點擊時減少訂單。
function slider(e) {
let { order } = getVal,
value = e.target.id,
total = Names.length;
if (value === "up" && order !== total - 1) {
setVal((rest) => ({ ...rest, order:order 1, alerts: Names[order 1]}));
} else if (value === "down" && order !== 0) {
setVal((rest) => ({ ...rest, order: order - 1, alerts: Names[order - 1] }));
}
}
完整的反應代碼片段：
import React, { useState } from "react";
function func() {
let [getVal, setVal] = useState({
alerts: "no alerts",
order: 0,
});
let Names = [
"Default",
"Evil laugh",
"classic alarm",
"Pause",
"intro music",
"Got item",
"Old bounce",
"bark",
"alarm tone",
];
function slider(e) {
let { order } = getVal,
value = e.target.id,
total = Names.length;
if (value === "up" && order !== total - 1) {
setVal((rest) => ({ ...rest, order:order 1, alerts: Names[order 1]}));
} else if (value === "down" && order !== 0) {
setVal((rest) => ({ ...rest, order: order - 1, alerts: Names[order - 1] }));
}
}
return (
<>
<button
onClick={slider}
id="up"
>
up
</button>
<p>
{getVal.alerts}
</p>
<button
onClick={slider}
id="down"
>down
</button>
</>
)
}uj5u.com熱心網友回復：
您的處理程式不需要那么復雜。我還建議使用資料屬性而不是 id。我做了一些改變：
到變數名，這樣它們就更有意義了——當你談論陣列時
index，比order.不再需要在狀態中設定警報。只需將名稱加載到狀態中，然后讓組件在當前索引處顯示名稱。
const { Fragment, useEffect, useState } = React;
// Pass in the names as a prop
function Example({ names }) {
// Add the names to state, and initialise the index
const [ state, setState ] = useState({ names, index: 0 });
function handleClick(e) {
// Get the id from the button's dataset
const { id } = e.target.dataset;
// Get the names, and index, from state
const { names, index } = state;
// Create a new index
const newIndex = id === 'down'
? index - 1
: index 1;
// Set a new state if the newIndex is between 0
// and less than the names array length
if (newIndex >= 0 && newIndex < names.length) {
setState({ ...state, index: newIndex });
}
}
return (
<Fragment>
<button data-id="down" onClick={handleClick}>Down</button>
<p>{state.names[state.index]}</p>
<button data-id="up" onClick={handleClick}>Up</button>
</Fragment>
);
};
const names=["Default","Evil laugh","classic alarm","Pause","intro music","Got item","Old bounce","bark","alarm tone"];
ReactDOM.render(
<Example names={names} />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>uj5u.com熱心網友回復：
這是您的方法的簡化版本。
function func() {
let [order, setOrder] = useState(0);
let Names = [
"Default",
"Evil laugh",
"classic alarm",
"Pause",
"intro music",
"Got item",
"Old bounce",
"bark",
"alarm tone"
];
function slider(e) {
var action = e.target.id,
total = Names.length;
if (action === "up" && order !== total - 1) {
setOrder( order 1 );
} else if (action === "down" && order !== 0) {
setOrder( order - 1 );
}
}
return (
<div>
<button onClick={slider} id="up">
up
</button>
<p>{Names[order]}</p>
<button onClick={slider} id="down">
down
</button>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/440202.html
標籤：javascript 反应 使用状态