一個接一個運行 function

Question

我正在嘗試設置點擊掛鈎。 設置該掛鈎后，它會輸入 url ，然后在設置后，它應該運行句柄提交 function 以更新網址並將其顯示到屏幕上。 我的問題是 function 同時運行。 我嘗試使用 useEffect 方法，將句柄提交 function 放在那里，但它不斷給出有關事件 object 的錯誤。 我已經在 onClick 方法上嘗試了 async/await function，但讀到它不適用於鈎子。 我已經閱讀了 Promise 文檔，但它們現在令人困惑。 誰能指出我正確的方向？

   const Peers = ({ peerData, symbol, handleSubmit }) => {

    const [peerSymbol, setPeerSymbol] = useState('');
    let today = new Date().toISOString().slice(0, 10)

    const urls = [
        `https://finnhub.io/api/v1/company-news?symbol=${peerSymbol}&from=2021-03-01&to=${today}&token=`,
        `https://finnhub.io/api/v1/stock/peers?symbol=${peerSymbol}&token=`,
        `https://finnhub.io/api/v1/stock/profile2?symbol=${peerSymbol}&token=`,
        `https://finnhub.io/api/v1/stock/financials-reported?symbol=${peerSymbol}&token=`,
        `http://api.marketstack.com/v1/tickers/${peerSymbol}/eod/latest?access_key`
    ]


    useEffect(() => {
        let e = e
        return (e) => handleSubmit(e, urls);
    }, [peerSymbol])
    
    
    return (
        <div className="peers bg-light">
            <h2>Peers</h2>
            {peerData.filter(peer => {
                return peer !== symbol.toUpperCase();
            }).map(element => {
                return <span 
                key={element} 
                onClick={async (e) => { setPeerSymbol(element); handleSubmit(e, urls) }}>{element}</span>
            })}
        </div>
    );
}

Answer 1

在組件主體外部添加一個 function 作為getUrls並使用元素和日期調用它：

const getUrls = (peerSymbol, today) => ([
    `https://finnhub.io/api/v1/company-news?symbol=${peerSymbol}&from=2021-03-01&to=${today}&token=budo2rv48v6spq9og4p0`,
    `https://finnhub.io/api/v1/stock/peers?symbol=${peerSymbol}&token=budo2rv48v6spq9og4p0`,
    `https://finnhub.io/api/v1/stock/profile2?symbol=${peerSymbol}&token=budo2rv48v6spq9og4p0`,
    `https://finnhub.io/api/v1/stock/financials-reported?symbol=${peerSymbol}&token=budo2rv48v6spq9og4p0`,
    `http://api.marketstack.com/v1/tickers/${peerSymbol}/eod/latest?access_key=72d118ca9db1873033447561590e2794`
]);

const Peers = ({ peerData, symbol, handleSubmit }) => {

    const [peerSymbol, setPeerSymbol] = useState('');
    const today = new Date().toISOString().slice(0, 10)
    
    return (
        <div className="peers bg-light">
            <h2>Peers</h2>
            {peerData.filter(peer => {
                return peer !== symbol.toUpperCase();
            }).map(element => {
                return <span 
                key={element} 
                onClick={async (e) => { setPeerSymbol(element); handleSubmit(e, getUrls(element, today)) }}>{element}</span>
            })}
        </div>
    );
}

這樣，您不必在調用handleSubmit之前依賴組件的 state 進行更新，如果不再需要它，您可以刪除useState 。