Question

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

How to render properties of objects in React?

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

 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]后）。

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 call接收数据时 - >

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

2 个答案: