2点目は、React Componentのrenderメソッドでデータの取得を行うべきではないという点です。renderは、propsやstateにあわせてreactiveに仮想DOMを構築するメソッドです。ですので、このメソッドの中で非同期のデータフェッチを行うことは避けるべきです。別のタイミング(例えばcomponentDidMount)でajaxでデータをフェッチし、setStateでVDOMを構築し直すのがthink in reactなやり方です。
私なら以下のように書くと思います。
js
1importReactfrom'react';2importReactDOMfrom'react-dom';3importaxiosfrom'axios'45classNewsListextendsReact.Component{6 state ={7 newsList:[]8}9asynccomponentDidMount(){10try{11const{data}=await axios.get("https://hacker-news.firebaseio.com/v0/topstories.json");12const newsList =JSON.parse(data);13this.setState({newsList});14}catch(e){15console.error(e);16}17}18render(){19return(20<ul>21{this.state.newsList.map((v,i)=>(22<li key={`news-${i}`}>{v}</li>23))}24<ul/>25)26}27}2829ReactDOM.render(30<NewsList/>,31document.getElementById('root')32);
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/02 05:33