>source

저는 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
          } 
        })
  }

크롬에서 : 모달은 모든 경우에 나타납니다.

가장자리 : 나는 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)

그래서 내 질문은 다음과 같습니다.

  • 내 응답에 "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>
      )
    }
    
    
    • 답변 # 1

      bluebird polyfill을 es6-promise로 대체하여 문제가 해결되었습니다.

    관련 자료

  • 이전 python 3.x - 내 코드에서 pandas 데이터 프레임에 새 열을 생성하기 위해 조건부 사용
  • 다음 내 laravel 컨트롤러에서 내 링크를 링크로 표시하는 방법