如何在 React 中呈现 objects 数组的属性？

Question

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

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

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

对我有用...如果 user 是 object。但是，在我的具体情况下，我获取并要呈现的数据是 objects.

的数组

所以，我 return 类似的东西 :

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

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

我预计一旦 API 获取 object 的用户数组，该组件将 re-render 然后该组件将显示每个 [=33] 的标题列表=] 用户数组（连接 [HMR] 后）。

Answer 1

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

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

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

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

Answer 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>

如何在 React 中呈现 objects 数组的属性？

How to render properties of an Array of objects in React?

reactjs

redux

react-redux