代码：
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);
一个是：
|
一个是：
|
然后感觉是，解析后得到的数据，不太对。
所以去看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