지도를 사용하여 반응 요소를 생성하는 방법

Question

hackernews api를 사용하여 내 응답 객체를 사용하여 개별 스토리 제목을 브라우저에 렌더링하는 속성 "데이터"를 얻으려고합니다. 원래 데이터는 개별 이야기를 나타내는 ID의 배열에 있습니다. 나는 이드에서 모든 이야기를 얻기 위해 두 번째 요청을한다. 현재 모든 제목은 브라우저에서 한 줄로 빠르게 나타납니다.

class App extends Component { 
    constructor() { 
    super() 
    this.state = { 
    storyIds: null, 
    title: null 
    } 
    } // constructor end 

    componentDidMount() { 
    axios.get('https://hacker-  news.firebaseio.com/v0/beststories.json?print=pretty') 
// use arrow to access state 

    .then((res) => { 

// res.data is array of story ids 

    this.setState({storyIds: res.data}) 
    }) 
    .then((res) => { 
    console.log(this.state.storyIds) 
     this.state.storyIds.map ((id) => { 
     axios.get(`https://hackernews.firebaseio.com/v0/item/${id}/title.json?print=pretty`) 
     .then((res) =>{ 
      this.setState({title: res.data}) 

      console.log(res.data) 
     }) 
     }) 
    }) 

} // didMount end 

    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to Hackernews Top Stories</h2> 
     </div> 
      <p>{this.state.title}</p> 

     </div> 
    ); 
    } 
} 

export default App; 

지도를 사용하여 response.data를 루프 처리하고 개별 줄에 제목을 생성하려면 어떻게합니까?

Answer 1

제목을 통해 .map을 수행하고 제목이있는 jsx 요소를 반환하는 함수를 사용해야합니다. 또한 모든 ajax 호출을 해결하려면 Promise.all()을 사용해야합니다.

function storyTitles(titles) { 
    return titles.map(title => (
    <p>{title}</p> 
    )) 
} 

class App extends Component { 
    constructor() { 
    super() 
    this.state = { 
     storyIds: [], 
     titles: [] 
    } 
    } // constructor end 

    componentDidMount() { 
    axios.get('https://hacker-news.firebaseio.com/v0/beststories.json?print=pretty') 
     .then((res) => { 
     this.setState({storyIds: res.data}) 
     }) 
     .then((res) => { 
      console.log(this.state.storyIds) 
      Promise.all(this.state.storyIds.map((id) => { 
      axios.get(`https://hackernews.firebaseio.com/v0/item/${id}/title.json?print=pretty`) 
      .then((res) => { 
       return Promise.resolve(res.data); 
      }) 
     ) 
      .then(responses => { 
       this.setState({titles: [...responses]}) 
      }) 
      }) 
     }) 

    } // didMount end 



    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to Hackernews Top Stories</h2> 
     </div> 
     {storyTitles(this.state.titles)} 
     </div> 
    ); 
    } 
} 

export default App;