reactjs - 未处理的 Promise Rejection 警告 - React、Jest 和 Enzyme
问题描述
(节点:480)UnhandledPromiseRejectionWarning:FetchError:无效的json响应正文原因:JSON输入意外结束(节点:480)UnhandledPromiseRejectionWarning:未处理的承诺拒绝。此错误源于在没有 catch 块的情况下抛出异步函数内部,或拒绝未使用 .catch() 处理的承诺。要在未处理的 Promise 拒绝时终止节点进程,请使用 CLI 标志
--unhandled-rejections=strict
(请参阅https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode)。(拒绝编号:10)
我的几个测试都得到了这些,但不是全部,所有测试都只是检查组件是否呈现。我已经在这里查看并尝试实现不同的东西,但我仍然收到相同的警告。
import React from 'react';
import DirectoryArea from './directoryArea.js';
import { shallow } from 'enzyme';
it('renders without crashing', () => {
shallow(<DirectoryArea/>);
});
所有的测试都是以这种方式编写的,但具有不同的组件。如何修复警告使其不显示?我已将 CLI 标志添加到测试脚本中,但这也无济于事。
这是目录区域的代码
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { api } from '../../constants';
import { request } from '../../utilities';
import { Image } from './helper.js';
import style from './directory.module.css';
export default class DirectoryArea extends Component {
constructor(props) {
super(props);
this.state = {
areasLoaded: false,
error: false,
};
this.loaded = false;
this.htmlLoaded = false;
this.info = [];
this.areas = {};
}
componentDidMount() {
this.loaded = true;
request(api(`directory/areas`), 'GET')
.then((res) => {
if(this.loaded) {
switch(res.status) {
case 200:
res.json()
.then((res) => {
for(let i = 0; i < res.length; i++) {
this.info.push(res[i]['AreaName']);
}
this.setState({ areasLoaded: true });
});
break;
default:
this.setState({ error: true, });
}
}
});
}
componentWillUnmount() {
this.loaded = false;
}
generateHtml(data) {
for(let i = 0; i < this.info.length; i++) {
this.areas[this.info[i]] = [];
}
for(let i = 0; i < data.length; i++) {
let singleArea = data[i]['AreaName'].split("| ");
for(let j = 0; j < singleArea.length; j++) {
this.areas[singleArea[j]].push(
<Link key={i + " " + j}
to={`/directory/u/${data[i]['AccountID']}`}
className={style.imageContainer}
>
<Image
photo={data[i]['Photo']}
photoType={data[i]['PhotoType']}
name={data[i]['FirstName'] + " " + data[i]['LastName']}
/>
</Link>
);
}
}
this.htmlLoaded = true;
}
render() {
if(!this.props.photosLoaded || !this.state.areasLoaded) {
return (
<span className={style.icon}>
<FontAwesomeIcon icon="spinner" pulse/>
</span>
);
}
if(this.props.photosLoaded && this.state.areasLoaded && !this.htmlLoaded) {
this.generateHtml(this.props.data);
}
return(
<div>
{Object.entries(this.areas).map(([key, value]) => {
return(
<div key={key} className={style.photo}>
<h5 className={style.header}>{key}</h5>
{value}
</div>
);
})}
</div>
);
}
}
解决方案
如果您正在查看此内容,因为您有类似的问题。我要做的是在 .then{} 块之后添加 ,err => console.log(err) ,如果有任何错误,它将输出到控制台。
例如
case 200:
res.json()
.then((res) => {
for(let i = 0; i < res.length; i++) {
this.info.push(res[i]['AreaName']);
}
this.setState({ areasLoaded: true });
}**,err => console.log(err)**);
推荐阅读
- react-router - React Router 如何拥有带参数的父路由和子路由
- observable - 根据获取的 url 返回数据
- php - Xero API 时间表
- excel - MsgBox 使用 If answer = Yes/No/Cancel 出现两次
- apache-beam - apache beam:在管道处理期间访问指标
- typescript - 打字稿:重载事件处理程序
- python - Jupyter / IPython Notebook 文本编辑作为降价
- javascript - 如果不在缓存中,则 JS 新图像
- android - JSON模型中的双重和布尔属性问题
- ruby-on-rails - 模型订单的未定义方法“aasm_state”您是说什么?aasm_state=