如何呈现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中对象数组的属性？

回答

相关问题