如何解决未处理的 Promise 拒绝警告 - React、Jest 和 Enzyme
(node:480) UnhandledPromiseRejectionWarning: FetchError: invalid json response body at reason: Unexpected end of JSON input
(节点:480)UnhandledPromiseRejectionWarning:未处理的承诺拒绝。这个错误要么是因为在没有 catch 块的情况下抛出了异步函数,要么是因为拒绝了一个没有用 .catch() 处理过的承诺。要在未处理的承诺拒绝时终止节点进程,请使用 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)**);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。