React - 通過獲取請求中的響應數據進行映射 - 爲什麼不顯示響應數據？

Question

即時通訊新的反應，我試圖顯示響應數據，我從一個get request.I一直在尋找多個類似的職位，試圖實現什麼爲他人工作，但對我來說沒有任何工作。在我的代碼下面，我沒有得到任何錯誤（設置狀態似乎也工作）但沒有顯示，我不知道爲什麼。有任何想法嗎？謝謝！

 class Testing extends React.Component { 
      constructor(props) { 
       super(props); 
       this.state = { 
        name: [] 
       }; 
       this.getData = this.getData.bind(this) 
      } 
      componentDidMount() { 
       this.getData(); 
      } 
      getData() { 
       axios.get('https://example.com) 
        .then(results => { 
         return results.data; 
        }) 
        .then(res => { 
         let arr = res.items; 
         let test = []; 
         return arr.map(function(item) { 
          test.push(item); 
         }) 
         this.setState({ 
          name: test 
         }); 
        }) 
       } 

       render() { 
        const persons = this.state.name.map((item, i) => { 
         return 
          <div> 
           <h1> {item.name} </h1> 
          </div> 
        }); 

        return 
        <div id = "layout-content" className = "layout-content-wrapper" > 
         <div className = "panel-list"> 
          All: {persons} 
         </div> 
        </div> 
       } 
      } 

改變渲染：

class Testing extends React.Component { 
      constructor(props) { 
       super(props); 
       this.state = { 
        name: [] 
       }; 
       this.getData = this.getData.bind(this) 
      } 
      componentDidMount() { 
       axios.get('https://example.com) 
        .then(results => { 
         return results.data; 
        }) 
        .then(res => { 
         let arr = res.items; 
         let test = []; 
         return arr.map(function(item) { 
          test.push(item); 
         }) 
         this.setState({ 
          name: test 
         }); 

        }) 
       } 


       render() { 
        <div> 
         this.state.name ? this.state.name.map((item, i) => { 
          return (
           <div> 
           <h1>{ item.name }</h1> 
           </div> 
          ) 
         }) : null; 
        </div> 

       } 
      } 

錯誤的位置：

<div> 
    this.state.name ? this.state.name.map((item, i) => { 
    return (
     ^
     <div> 
      <h1>{ item.name }</h1> 
     </div> 

Answer 1

你的代碼的問題是你的setState從不被調用。如果你看看你的api調用的最後一個函數，你在setState之前（即在arr.map）有return語句。因爲你的代碼永遠不會到達setState。刪除return語句，它應該工作：

   getData() { 
       axios.get('https://example.com) 
        .then(results => { 
         return results.data; 
        }) 
        .then(res => { 
         let arr = res.items; 
         let test = []; 
         arr.map(function(item) { 
          test.push(item); 
         }) 
         this.setState({ 
          name: test 
         }); 
        }) 
       } 

編輯::好的嘗試包裝你的括號渲染()這樣

   render() { 
        const persons = this.state.name.map((item, i) => { 
         return 
          (<div> 
           <h1> {item.name} </h1> 
          </div>); 
        }); 

        return 
        (<div id = "layout-content" className = "layout-content-wrapper" > 
         <div className = "panel-list"> 
          All: {persons} 
         </div> 
        </div>); 
       } 

Answer 2

首先，將你的getData功能，甚至整個請求邏輯爲componentWillMount功能。其次，把你的render函數改成：

render() { 
    return (
    <div> 
     this.state.name ? this.state.name.map((item, i) => { 
      return (
      <div> 
       <h1>{ item.name }</h1> 
      </div> 
     ) 
     }) : null; 
    </div> 
    ) 
}