React-使用Promise with Edge时无法解析错误

Question

我对React很陌生，我不知道那里发生了什么。

我有一个搜索栏，允许我按名称搜索用户。如果一些用户匹配，那么我需要打开一个带有结果的模态。如果发生错误，那么我需要打开一个自定义的error模态，其中包含一条根据错误类型而更改的消息。

这是我的功能：

const onSearchUser = (userName: string): void => {
searchUser(userName)
.promise.then(result => {
// show users modal
})
.catch(e => {
console.log(e)
const response = e.response.data
if( 'errorType' in response ) {
// should open an modal with a specific error message
} else {
// should open another modal with another error message
} 
})
}

在chrome上：模态在所有情况下都会显示。

边缘：我得到一个can't execute code from freed script

所以，在尝试删除一些代码行(只是为了测试(后，我猜错误来自

const response = e.response.data

因为如果我将代码更改为：，模态实际上会显示

const onSearchUser = (userName: string): void => {
searchUser(userName)
.promise.then(result => {
// show users modal
})
.catch(e => {
console.log(e)
showModalError(true, 'some message');
})
}

console.log(e)给出以下堆栈跟踪：

[object Error]: {description: "Unable to get property 'status' of undefined or null reference", message: "Unable to get property 'status' of undefined or null reference", number: -2146823281, stack: "TypeError: Unable to get property 'status' of undefined or null reference at Anonymous function (http://localhost:8000/assets/main.bundle.js:681:3) at tryCatcher (http://localhost:8000/assets/main.bundle.js:57710:9) at Promise.prototype._settlePromiseFromHandler (http://localhost:8000/assets/main.bundle.js:55826:9) at Promise.prototype._settlePromise (http://localhost:8000/assets/main.bundle.js:55883:13) at Promise.prototype._settlePromise0 (http://localhost:8000/assets/main.bundle.js:55928:5) at Promise.prototype._settlePromises (http://localhost:8000/assets/main.bundle.js:56004:13) at _drainQueueStep (http://localhost:8000/assets/main.bundle.js:52778:9) at _drainQueue (http://localhost:8000/assets/main.bundle.js:52771:9) at Async.prototype._drainQueues (http://localhost:8000/assets/main.bundle.js:52787:5) at drainQueues (http://localhost:8000/assets/main.bundle.js:52700:9)"}
description: "Unable to get property 'status' of undefined or null reference"
message: "Unable to get property 'status' of undefined or null reference"
number: -2146823281
stack: "TypeError: Unable to get property 'status' of undefined or null reference at Anonymous function (http://localhost:8000/assets/main.bundle.js:681:3) at tryCatcher (http://localhost:8000/assets/main.bundle.js:57710:9) at Promise.prototype._settlePromiseFromHandler (http://localhost:8000/assets/main.bundle.js:55826:9) at Promise.prototype._settlePromise (http://localhost:8000/assets/main.bundle.js:55883:13) at Promise.prototype._settlePromise0 (http://localhost:8000/assets/main.bundle.js:55928:5) at Promise.prototype._settlePromises (http://localhost:8000/assets/main.bundle.js:56004:13) at _drainQueueStep (http://localhost:8000/assets/main.bundle.js:52778:9) at _drainQueue (http://localhost:8000/assets/main.bundle.js:52771:9) at Async.prototype._drainQueues (http://localhost:8000/assets/main.bundle.js:52787:5) at drainQueues (http://localhost:8000/assets/main.bundle.js:52700:9)"
__proto__: Object

但是，如果我从网络选项卡中显示响应主体，我有：

{
errorType : "ERR103",
message : "Too many results"
}

如果我在Chrome上也这样做，我会在NETWORK选项卡中得到同样的结果，但控制台会给出：

Error: Request failed with status code 502
at createError (http://localhost:8000/assets/main.bundle.js:51423:15)
at settle (http://localhost:8000/assets/main.bundle.js:51685:12)
at XMLHttpRequest.handleLoad (http://localhost:8000/assets/main.bundle.js:50888:7)
From previous event:
at xhrAdapter (http://localhost:8000/assets/main.bundle.js:50839:10)
at dispatchRequest (http://localhost:8000/assets/main.bundle.js:51489:10)
From previous event:
at Axios.request (http://localhost:8000/assets/main.bundle.js:51265:23)
at Axios.<computed> [as get] (http://localhost:8000/assets/main.bundle.js:51280:17)
at Function.wrap [as get] (http://localhost:8000/assets/main.bundle.js:51856:15)
at get (http://localhost:8000/assets/main.bundle.js:694:62)
at searchLegalEntities (http://localhost:8000/assets/main.bundle.js:256:66)
at onSearch (http://localhost:8000/assets/main.bundle.js:3212:81)
at onSearch (http://localhost:8000/assets/main.bundle.js:9171:14)
at HTMLUnknownElement.callCallback (http://localhost:8000/assets/main.bundle.js:96780:14)
at Object.invokeGuardedCallbackDev (http://localhost:8000/assets/main.bundle.js:96829:16)
at invokeGuardedCallback (http://localhost:8000/assets/main.bundle.js:96884:31)
at invokeGuardedCallbackAndCatchFirstError (http://localhost:8000/assets/main.bundle.js:96898:25)
at executeDispatch (http://localhost:8000/assets/main.bundle.js:97028:3)
at executeDispatchesInOrder (http://localhost:8000/assets/main.bundle.js:97053:5)
at executeDispatchesAndRelease (http://localhost:8000/assets/main.bundle.js:97157:5)
at executeDispatchesAndReleaseTopLevel (http://localhost:8000/assets/main.bundle.js:97166:10)
at forEachAccumulated (http://localhost:8000/assets/main.bundle.js:97138:8)
at runEventsInBatch (http://localhost:8000/assets/main.bundle.js:97183:3)
at runExtractedPluginEventsInBatch (http://localhost:8000/assets/main.bundle.js:97324:3)
at handleTopLevel (http://localhost:8000/assets/main.bundle.js:102247:5)

所以我的问题是：

1. 我得到"；无法从释放的脚本中执行代码"因为"；errorType"；属性不存在于我的响应中？我认为这个错误发生在子组件使用父组件的某段代码时，该代码已不存在。。

2. Chrome和Edge之间有什么区别？

3. 我发现错误的方式正确吗？如何解决我的问题？

谢谢。

编辑这是完整的代码：

export const SearchUserHeader: FC = () => {
const style = useStyles()
const [loading, setLoading] = useState(false)
const [value, setValue] = useState('')
const [error, setError] = useState<string | undefined>(undefined)
const [open, setOpen] = useState(false)
const [userList, setUserList] = useState<UserList | undefined>(
undefined,
)
const [modalError, setModalError] = useState<string | undefined>(undefined)
const searchUserAction = (value: string): void => {
setLoading(true)
setOpen(false)
searchUsers(value)
.promise.then(result => {
setModalError(undefined)
setUserList(result)
setOpen(true)
})
.catch(e => {
const response = e.response.data
if ('codeError' in response) {
const error = response as SearchUserError
if (['ERR13', 'ERR14'].includes(error.codeError)) {
setError(error.message)
} else {
error.codeError === 'ER09'
? setModalError(error.message)
: setModalError('user-technical-error')
setUserList(undefined)
setOpen(true)
}
} else {
setModalError('user-technical-error')
setUserList(undefined)
setOpen(true)
}
})
}
const onKeyPress = (e: ChangeEvent<HTMLInputElement>): void => {
setValue(e.target.value)
setError(undefined)
}
return (
<div>
<Header>
<div className={style.children}>
<SearchBar>
onClick={searchUserAction}
onChange={onKeyPress}
value={value}
error={error}
loading = {loading}
/>
</div>
</Header>
{
<UserResults>
open={open}
setOpen={setOpen}
result={userList}
errorMessage={modalError}
/>
}
</div>
)
}

export const UserResults: FC<{
open: boolean
setOpen: (v: boolean) => void
result?: UserList 
errorMessage?: string
}> = ({ open, setOpen, result, errorMessage }) => {
const styles = useStyles()
return (
<Modal open={open} onClose={() => setOpen(false)}>
<div className={styles.modalContainer}>
<div className={styles.modalContent}>
<div className={styles.header}>
<div className={styles.title}>
{` (${
result !== undefined && result.length !== undefined
? result.length
: 0
})`}
</div>
<Button
className={styles.closeButton}
onClick={() => setOpen(false)}
icon={<Icon name="cross" />}
/>
</div>
<div className={styles.body}>
{errorMessage === undefined && Array.isArray(result) ? (
result.length > 0 ? (
<ModalContent setOpen={setOpen} list={result} />
) : (
<div className={styles.infoMessage}>
No results
</div>
)
) : errorMessage == 'user-technical-error' ? (
<ErrorHeader
open={true}
message={i18n('user.search.error')}
/>
) : (
<div>{errorMessage}</div>
)}
</div>
</div>
</div>
</Modal>
)
}

Answer 1

用es6 promise 替换bluebird polyfill解决了问题