一个接一个运行 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 。