如何呈現React中對象數組的屬性？

所以，我有相同的問題，因爲我們的朋友在這裏：如何呈現React中對象數組的屬性？

How to render properties of objects in React?

通過Nahush Farkande以下（upvoted）解決方案：

render() { 
    let user = this.props.user || {}; 
    .... 
     {user.email} 
    .... 
}

作品對我來說......如果用戶是一個對象。但是，在我的具體情況中，我獲取並想要呈現的數據是一組對象。

所以，我回到類似的東西：

   <ul>          
        { 
         user.map((el, idx) => { 
          return (
           <li key = {idx}> 
            <div className="panel-body clearfix"> 
             {el.title} 
            </div> 
           </li>    
          ) 
         }) 
        } 
       </ul>

這是行不通的。我收到一條錯誤消息，告訴我user.map不是一個函數（在[HMR]連接之前）。我期望一旦API獲取用戶的對象數組，該組件將重新呈現，然後組件將顯示用戶數組中每個對象的標題列表（在[HMR]連接後）。

來源

2017-04-08 John Doe

所以你可能要像'（用戶|| []）。圖（...）'處理'null'情況？ – Sulthan

如果您的user（我建議重命名爲users）是一個數組，則不能使用{}作爲默認值。您應該使用[]作爲默認值：

const user = this.props.user || []

或者，你可以使用一個完全不同的分支來處理負載情況：

if (!this.props.user) { 
    return (
     <div> ... my loading placeholder ... </div> 
    ); 
}

來源

2017-04-08 15:22:57 Sulthan

該死！我之前做過，而且我得到了同樣的錯誤信息。這就是爲什麼我在SO上發佈這個新問題。它現在真的有用:)謝謝。 –

您已經有了正確的答案，但只是想給正在運行的例。

初始化以數據存在狀態與默認值的object -> {}

在殼體或在每種情況下array -> []

顯然情況下，例如

你的渲染邏輯應該是不同的例如在陣列的情況下你需要map來遍歷數組並生成jsx element。

所以，當過您的組件或者通過API調用或通過道具的變化使用適當的生命週期方法，如componentWillReceiveProps或componentDidMount以獲得最新的數據，並再次收到更新後的數據（或者也可以是空數據或完整數據）用最新的數據設置狀態。

例如，當經由API調用被接收的數據 - >

constructor() { 
    this.state = { 
     data : [] 
    } 
} 

componentDidMount() 
{ 
    this.getFunction(); 
} 

getFunction =() => { 
    this.ApiCall() 
     .then(
      function(data){ 
       console.log(data); 
       // set the state here 
       this.setState({data:data}); 
      }, 
      function(error){ 
       console.log(error); 
      } 
    ); 
}

所以在初始時呈現您的數據將是或是空物體或空數組，你會相應地調用適當的渲染方法爲該。

class Test extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      data : [] 
 
    } 
 
    } 
 
componentWillMount() { 
 
    this.setState({ data : this.props.dp }); 
 
} 
 
    renderFromProps() { 
 
    return this.state.data 
 
    .map((dpElem) => 
 
     <h3>{dpElem.name}</h3> 
 
    ); 
 
    } 
 
    
 
    render() { 
 
    return (
 
    <div> 
 
    <h1> Rendering Array data </h1> 
 
     <hr/> 
 
     { this.renderFromProps()} 
 
    </div> 
 
    ); 
 
    } 
 
    
 
} 
 

 
const dynamicProps = [{ name:"Test1", type:"String", value:"Hi1" }, 
 
{ name:"Test2", type:"String", value:"Hi2" }, 
 
{ name:"Test3", type:"String", value:"Hi3" } 
 
]; 
 

 
ReactDOM.render(
 
    <Test dp={dynamicProps} />, 
 
    document.getElementById('root') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"> 
 
</div>

來源

2017-04-08 16:01:28 WitVault

如何呈現React中對象數組的屬性？

回答

相關問題