javascript - react -将Promise与Edge一起使用时无法解析错误

Question

我对React很陌生，我不理解那里发生的事情。
我有一个搜索栏，可让我按名称搜索用户。
如果某些用户匹配，那么我需要用结果打开一个模式。
如果发生错误，那么我需要打开一个自定义错误模态，并显示一条根据错误类型而变化的消息。
这是我的功能:

 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上执行相同的操作，则在“网络”标签中会得到相同的结果，但控制台会显示:

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)

所以我的问题是:

我是否获得“无法从释放的脚本中执行代码”，因为响应中不存在“errorType”属性？我虽然在子组件使用不再存在的父组件的某些代码时会发生此错误。

Chrome和Edge之间有什么区别？

我是否以正确的方式捕获错误？如何解决我的问题？

谢谢。
编辑这是完整的代码:

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解决了问题