Question

我在一个名为jobs的组件上有一个数组prop，它将在控制台中显示，但总是返回length：0

console.log screenshot

您将看到的图像肯定在数组中有三个元素，但是当我尝试通过console.log访问数组长度时（this.props.jobs.length）;

为什么这个数组的元素会注销，但我无法访问代码中的元素？

根据@finalfreq的要求，请参阅以下完整代码：

const DepartmentContainer = React.createClass({
   getInitialState:function(){
     return{sortedJobs:{}, loaded:false};
   },
   componentDidMount:function(){
     //console.log(this.state.sortedJobs);
     var departments = this.props.departments;
     departments.map(function(name, index){
       this.state.sortedJobs[name] = [];
     }, this)

     var _this = this;

     axios.get('{api call returning json}')
     .then(function (response) {
       for(let i=0;i<response.data.jobs.length;i++){
         for(let j=0;j<response.data.jobs[i].metadata[0].value.length;j++){
           _this.state.sortedJobs[response.data.jobs[i].metadata[0].value[j]].push(response.data.jobs[i]);
         }
       }
     })
     .catch(function (error) {
       console.log(error);
     });
     //console.log(Object.keys(_this.state.sortedJobs).length);
     this.setState({sortedJobs: _this.state.sortedJobs});
     this.setState({loaded:true});
   },
   render:function(){
     var departments = this.state.sortedJobs;
     return(
       <div>
       {this.state.loaded ?
         <div className="row grid-12">
           {Object.keys(departments).map(function(label, department){
             //console.log(departments[label]);
             return <Department key={label} title={label} jobs={departments[label]}/>
           })}
         </div>
         :
         <div>Test</div>
       }
       </div>
     );
   }
 });



 const Department = React.createClass({
    getInitialState:function(){
      return{hidden:false, hasJobs:false};
    },
    componentWillMount:function(){
      const jobs = this.props.jobs;
      if(jobs.length>0){
        this.setState({hasJobs:true});
      }
    },
    componentDidMount:function(){
      console.log(this.state.hasJobs);
      console.log(this.props.jobs.length);
    },
    renderNormal:function(){
      return(
                <div className="grid-4 department-block" data-dep-filter={this.state.hidden} data-loc-filter="false" data-department={this.props.title}><h3 className="text-uppercase">{this.props.title}</h3>
                    <div className="posting-list margin-bottom">
            <h3 className="text-uppercase">{this.props.title}</h3>
                    </div>
                </div>
      )
    },
    renderEmpty:function(){
      return(
            <div className="grid-4 department-block" data-dep-filter={this.state.hidden} data-loc-filter="false" data-department={this.props.title}><h3 class="text-uppercase">{this.props.title}</h3>
                <div className="posting-list margin-bottom">
                    <div class="no-posts job-post">
                        <p><em>0 Current Openings</em></p>
                    </div>
                </div>
            </div>
      );
    },
    render: function(e){
      if (this.hasJobs) {
        return (
          this.renderNormal()
        )
      }else{
        return(
          this.renderEmpty()
        )
      }

    }
  });

在Department：componentWillMount函数中我想检查从DepartmentContainer：render函数传递给它的jobs数组，并将所述Department上的状态设置为hasJobs true / false

Answer 1

@finalfreq有正确的想法。这是JavaScript控制台如何工作的工件（至少对于Chrome）。通常仅在展开时显示/检索值，这可能导致一些反直觉行为。您必须在中将元素添加到数组，然后将其记录到控制台。

检查出来：

我制作一个数组并将其推入其中。然后我将其登录到控制台。然后我推了第二个元素。

现在，当我展开以前记录的数组时，您会看到它现在具有最新的值。除了“Array[1]”不会更新为“Array[2]”...并且如果您将另一个值推送到数组中，即使您再次折叠和展开它们，以前记录的值也不会更改。

故事的寓意是......不要依赖console.log 太多。但如果你这样做，就要学习它的怪癖。

React prop数组长度返回0

1 个答案: