reactjs - React prop数组长度返回0

Question

这个问题已经有答案了:

Can't iterate over my array/object. Javascript, React Native [duplicate] (1 个回答)

已关闭 6 年前。

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

您将看到的图像在数组中肯定有三个元素，但是当我尝试通过 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 函数传递给它的作业数组，并将所述部门的状态设置为 hasJobs true/false

Answer 1

@finalfreq 的想法是正确的。这是 JavaScript 控制台如何工作的产物(至少对于 Chrome 而言)。值通常仅在展开时才显示/检索，这可能会导致一些违反直觉的行为。您必须在将数组记录到控制台之后向数组添加元素。

检查一下:

我创建了一个数组并将一些东西放入其中。然后我将其记录到控制台。然后我推送第二个元素。

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

这个故事的寓意是...不要过度依赖console.log 呵呵。但如果你这样做了，请了解它的怪癖。