[英]Run one function after another
I am trying to to set a hook on click.我正在尝试设置点击挂钩。 When that hook is set, it enters a url and then when it is set, it is supposed to run a handleSubmit function to update the urls and display it to screen.设置该挂钩后,它会输入 url ,然后在设置后,它应该运行句柄提交 function 以更新网址并将其显示到屏幕上。 My problem is that the function run at the same time.我的问题是 function 同时运行。 I have tried to use the useEffect method, by placing the handleSubmit function in there, but it keeps giving errors about the event object.我尝试使用 useEffect 方法,将句柄提交 function 放在那里,但它不断给出有关事件 object 的错误。 I have tried the async/await function on the onClick method but have read that it doesn't work on hooks.我已经在 onClick 方法上尝试了 async/await function,但读到它不适用于钩子。 I have read the promises docs but they are confusing right now.我已经阅读了 Promise 文档,但它们现在令人困惑。 Can anyone point me in the right direction?谁能指出我正确的方向?
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>
);
}
Add a function outside the component's body as getUrls
and call it with the element and date:在组件主体外部添加一个 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>
);
}
this way you don't have to rely on the component's state to update before calling handleSubmit
and you can remove useState
if it's no longer needed.这样,您不必在调用handleSubmit
之前依赖组件的 state 进行更新,如果不再需要它,您可以删除useState
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.