如何使用功能组件进行api调用?

时间:2019-11-27 16:26:05

标签: ajax reactjs react-functional-component

我正在使用以下组件:

export const Home =() =>
        <div className="cardBox" style={styleBox}>
            <CardTrail></CardTrail>
            <CardTrail></CardTrail>
            <CardTrail></CardTrail>
            <Footer></Footer>
          </div>

,我正在尝试使用AJAX发出get API请求。不能找到使用功能组件的合适方法。我是通过componentDidMount()生命周期方法的帮助通过类组件实现的。

1 个答案:

答案 0 :(得分:0)

如果使用React 16.8或更高版本,则功能组件中的等效项是使用带有空依赖项列表的效果:

const regex = /\.?[a-zA-Z](?:\.[a-zA-Z])+\.?|\.[a-zA-Z]\.|(?!\d)(\w[A-Za-z']*)/g;
const str = `This.Sentence.Has.Some.Funky.Stuff.U.S.S.R.Going.On.And.Contains.Some.   ABBREVIATIONS.Too.
 
This.Sentence.Has.Some.Funky.Stuff .U.S.S.R. Going.On.And.Contains.Some.   ABBREVIATIONS.Too.
 
A.S.A.P.?
 
Ctrl+Alt+Delete
 
Mr.Smith bought google.com for 1.5 million dollars, i.e. he paid a lot for it. Did he mind? A.d.a.m Jones Jr. thinks he didn't. In any case, this isn't true... Well, with a probability of .9 it isn't. Mr. John Johnson Jr. was born in the U.S.A but earned his Ph.D. in Israel before joining Nike Inc. as an engineer! He also worked at craigslist.org as a b c d e F G H I J business analyst.`;
let m;

while ((m = regex.exec(str)) !== null) {
  // This is necessary to avoid infinite loops with zero-width matches
  if (m.index === regex.lastIndex) {
    regex.lastIndex++;
  }
  if (undefined !== m[1]) {
    console.log(m[1]);
  }
}