如何在 React 中渲染对象数组的属性？答案

【问题标题】：How to render properties of an Array of objects in React?如何在 React 中渲染对象数组的属性？
【发布时间】：2017-09-03 21:12:46
【问题描述】：

所以，我和我们的朋友有完全相同的问题：

How to render properties of objects in React?

以下由 Nahush Farkande 提出的（赞成的）解决方案：

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

为我工作...如果 user 是一个对象。但是，在我的特定情况下，我获取并想要呈现的数据是一个对象数组。

所以，我返回类似的东西：

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

这行不通。我收到一条错误消息，告诉我 user.map 不是函数（在 [HMR] 连接之前）。

我预计一旦 API 获取用户对象数组，组件将重新渲染，然后组件将显示用户数组的每个对象的标题列表（在 [HMR] 连接之后）。

【问题讨论】：

所以您可能想要(user || []).map(...) 之类的东西来处理null 案例？

标签： reactjs redux react-redux

【解决方案1】：

如果你的user（我建议重命名为users）是一个数组，那么你不能使用{}作为默认值。您应该使用[] 作为默认值：

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

或者，您可以使用完全不同的分支来处理加载情况：

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

【讨论】：

该死的！！！我以前这样做过，我得到了同样的错误信息。这就是为什么我在 SO 上发布这个新问题。它现在确实有效:) 谢谢。

【解决方案2】：

你已经有了正确的答案，但只是想举个例子。

使用默认值初始化您所在州的数据，例如

如果是object -> {}

以防万一或array -> []

显然，在每种情况下，您的渲染逻辑都应该不同，例如，在数组的情况下，您需要 map 循环遍历数组并生成 jsx element。

因此，当您的组件通过 api 调用或通过 prop 更改接收到更新的数据（可以是空数据或完整数据）时，请使用适当的生命周期方法，例如 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>

【讨论】：