最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】ReactJS出错:Uncaught TypeError map is not a function

ReactJS crifan 4097浏览 0评论

代码:

  fetchFirstInspectionPending(start = 1) {
    const order = this.firstInspectionSortType;
    const url = `/yunjian/yunjian/chujianUnDisposeList/${order}?start=${start}&limit=10`;
    this.props.fetch(url, {}, ({ data, size}) => {
      const { firstInspectionPendingList } = this.state;
      this.setState({
        firstInspectionPendingTotal: size,
        firstInspectionPendingList: start === 1 ? data : firstInspectionPendingList.concat(data)
      });
    });
  }
  fetchDisposed(start = 1) {
    const url = `/yunjian/yunjian/disposedList?start=${start}&limit=10`;
    this.props.fetch(url, {}, ( data ) => {
      const { disposedList } = this.state;
      this.setState({
        disposedList: start === 1 ? data : disposedList.concat(data)
      });
    });
  }
renderFirstInspectionPending() {
    const {
      firstInspectionPendingList
    } = this.state;
    return (
      <div class={style.the_herd_all}>
        <div class={style.nn_list_tit}>
          <a
            onClick={this.firstInspectionSortByShed}
            class={this.firstInspectionSortType === ORDER.BY_SHED ? style.px_c : ”}
          >按牛舍排序</a>
          <a
            onClick={this.firstInspectionSortByTime}
            class={this.firstInspectionSortType === ORDER.BY_TIME ? style.px_c : ”}
          >按时间排序 <i class={style.zx} /></a>
        </div>
        <ul class={style.nn_a_list}>
          {
            firstInspectionPendingList.map(item => {
              return (
                <InspectionPendingItem
                  data={item}
                  segmentIndex={0}
                />
              );
            })
          }
        </ul>
      </div>
    );
  }
  renderDisposed() {
    const { disposedList } = this.state;
    console.log(disposedList);
    return (
      <div class={style.nn_b_list}>
        <dl>
          <dt>牛号</dt>
          <dt>牛舍</dt>
          <dt>孕检结果</dt>
          <dt>处理时间</dt>
        </dl>
        {
          disposedList.map(({
            cow_id,
            cowshed_id,
            dispose_date,
            renshen_status
          }) => {
            return (
              <dl>
                <dd>{cow_id}</dd>
                <dd>{cowshed_id}</dd>
                <dd>{ renshen_status }</dd>
                <dd>{formatDate(dispose_date)}</dd>
              </dl>
            );
          })
        }
      </div>
    );
  }

运行出错:

index.js?05ac:204 Uncaught TypeError: disposedList.map is not a function
    at PregnancyManagement.renderDisposed (eval at <anonymous> (bundle.js:2944), <anonymous>:290:20)
    at PregnancyManagement.showActiveContentList (eval at <anonymous> (bundle.js:2944), <anonymous>:333:17)
    at PregnancyManagement.render (eval at <anonymous> (bundle.js:2944), <anonymous>:381:12)
    at renderComponent (eval at <anonymous> (bundle.js:814), <anonymous>:263:38)
    at rerender (eval at <anonymous> (bundle.js:814), <anonymous>:38:43)

对应的上述两个url返回的数据是:

可以看出来,对应的返回的数据结构都是类似的。

所以没搞懂,维护此处出错。

然后通过打log,看到的是:

console.log(firstInspectionPendingList);

console.log(disposedList);

一个是:

  1. (2) [ObjectObject]
    1. 0:Object
      1. cow_id:"2016-162350"
      2. cowshed_id:"443"
      3. id:"2"
      4. peizhong_date:1497456000000
      5. __proto__:Object
    2. 1:Object
    3. length:2
    4. __proto__:Array(0)

一个是:

  1. Object {dataArray(3)size3}
    1. data:Array(3)
      1. 0:Object
        1. cow_id:"15-6961"
        2. cowshed_id:"1"
        3. dispose_date:1498200341000
        4. id:"4028c0815c9a4e22015c12312"
        5. renshen_status:"3"
        6. __proto__:Object
      2. 1:Object
      3. 2:Object
      4. length:3
      5. __proto__:Array(0)
    2. size:3
    3. __proto__:Object

然后感觉是,解析后得到的数据,不太对。

所以去看url返回后的数据处理,结果找到问题了:

一个是:

fetchFirstInspectionPending:

this.props.fetch(url, {}, ({ data, size}) => {

一个是

fetchDisposed

this.props.fetch(url, {}, ( data ) => {

所以,此处是把后者的:

( data )

换成:

({ data, size})

变成:

this.props.fetch(url, {}, ({ data, size }) => {

就可以了。

【总结】

此处,由于url的fetch后的数据解析,拿到了整个的:

{
        "data": [
            {
                "cowshed_id": "1",
                "id": "4028c0815c9a4e22015c9aa7112123",
                "renshen_status": "3",
                "cow_id": "15-6961",
                "dispose_date": 1498113941000
            },
            。。。。。。
        ],
        "size": 3
    }

而不是:

[
            {
                "cowshed_id": "1",
                "id": "4028c0815c9a4e22015c9aa7112123",
                "renshen_status": "3",
                "cow_id": "15-6961",
                "dispose_date": 1498113941000
            },
            。。。。。。
        ]

从而导致

不是list的数据,去map,结果出错。

解决办法:

把之前的:

this.props.fetch(url, {}, ( data ) => {

改为:

this.props.fetch(url, {}, ({ data, size }) => {

即可,后续通过 ({ data, size })所取到的值,就是list值,就可以去map操作了。

转载请注明:在路上 » 【已解决】ReactJS出错:Uncaught TypeError map is not a function

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
61 queries in 0.110 seconds, using 18.89MB memory