一个接一个地运行一个函数答案

【问题标题】：Run one function after another一个接一个地运行一个函数
【发布时间】：2021-03-29 04:38:48
【问题描述】：

我正在尝试设置点击挂钩。设置该钩子后，它会输入一个 url，然后当它设置时，它应该运行一个 handleSubmit 函数来更新 url 并将其显示到屏幕上。我的问题是该功能同时运行。我尝试使用 useEffect 方法，将 handleSubmit 函数放在那里，但它不断给出有关事件对象的错误。我已经在 onClick 方法上尝试了 async/await 函数，但读到它在钩子上不起作用。我已经阅读了 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>
    );
}

【问题讨论】：

那么handleSubmit 应该用事件和URL 调用吗？为什么需要这个活动？
@Ramesh Reddy 我将 handleSubmit 作为道具传递下来。它具有事件对象作为参数
好的，但是handleSubmit 对点击事件对象做了什么？
e.preventDefault()
去掉整个useEffect有什么问题？因为您已经在 onClick 中调用了 handleSubmit

标签： javascript reactjs

【解决方案1】：

在组件主体外添加一个函数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 之前依赖组件的状态来更新，如果不再需要useState，您可以将其删除。

【讨论】：