我有這個 React 選擇下拉選單：
const handleSyncList = () => {
......
};
const [exchangeId, setExchangeId] = useState('');
<select onSelect={e => setExchangeId(e.target.value)} onChange={handleSyncList}>
<option value="">All Exchanges</option>
{exchangesList.map(otherEntity => (
<option value={otherEntity.exchangeId}>
.......
</option>
))
: null}
</select>
我需要將選定的值設定為exchangeId并呼叫handleSyncList. 是否可以先設定選項值，然后handleSyncList使用 useEffect呼叫，如下所示：
useEffect(callback, [dep])
uj5u.com熱心網友回復：
您可以設定handleSyncList為useEffect回呼并定義exchangeId為useEffect依賴項之一，并且每當exchangeId更新時，您handleSyncList將使用更新值呼叫exchangeId，如下所示；
const exchangesList = ['a','b','c']
const App = ()=> {
const [exchangeId, setExchangeId] = React.useState('');
const handleSyncList = () => {
console.log(exchangeId); // or whatever else
};
React.useEffect(handleSyncList , [exchangeId]);
return (
<select onChange={e => setExchangeId(e.target.value)}>
<option value="">All Exchanges</option>
{exchangesList.map(otherEntity => (
<option value={otherEntity}>
{otherEntity}
</option>
))
}
</select>
)
}
ReactDOM.render(<App/>, document.getElementById('root'))<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="root"></div>考慮一下，以這種方式handleSync將在第一次渲染中呼叫，您可以通過檢查是否exchangeId具有值來控制它，或者您可以通過 reactuseRef和 controll定義一個變數，該變數是否是組件的第一次渲染，如下所示：
...
const [exchangeId, setExchangeId] = React.useState('');
const isMounted = React.useRef(false);
const handleSyncList = () => {
if(isMounted.current){
console.log(exchangeId); // or whatever else
}
};
React.useEffect(handleSyncList , [exchangeId]);
React.useEffect(()=> { isMounted.current = true } , []);
...
uj5u.com熱心網友回復：
是的，但是您必須確保僅在exchangeId更改時才運行它，因此您必須將以前的exchangeId值存盤在某個地方，最好是在 ref.
const [exchangeId, setExchangeId] = useState('');
const lastExchangeId = useRef(exchangeId);
//...
useEffect(() => {
if (exchangeId !== lastExchangeId.current) {
handleSyncList();
lastExchangeId.current = exchangeId;
}
}, [exchangeId])
uj5u.com熱心網友回復：
我不能評論我建議在設定狀態后使用 useState 回呼的帖子
<select onChange={e => setExchangeId(e.target.value, () => handleSyncList()}>
uj5u.com熱心網友回復：
useEffect(() => {
if(exchangeId !== "") handleSyncList()
},[exchangeId])
它將保證您想要的訂單。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/407783.html
標籤：
上一篇：訪問物件時如何獲得明確的型別？