[에러노트] react form에서 onKeyPress 2번 실행되는 문제

이렇게 상품 바코드 스캔 부분에 숫자를 치고 엔터를 누르거나 찾기를 누르면 서버  get 요청을 보내는 것을 만들고 있었다. 

 

[문제]

api가 2번 요청됨

 

[해결 1 - 실패]

  http
        .get(`/서버 api?something=something`)

이렇게 되어있던 요청을 

  http
        .get(`/서버 api `, {
          params: {
            something: something,
          },
        })

이렇게 바꾸었다.

 

어떤 페이지에서는 되는데 어떤 페이지에서는 그래도 2번 호출이 일어났다. 

 

[해결2 - 실패]

   <form onSubmit={handleSubmit(findDetailInfo)} disabled={!formState.isSubmitted}>
            <Box className={classes.searchBar}>
              <TextField
                type="number"
                label="상품 바코드 스캔"
                variant="outlined"
                {...register('search')}
                autoFocus
                onKeyPress={e => onKeyPress(e)}
                fullWidth
              />

              <Button variant="outlined" type="submit" disabled={!formState.isSubmitted}>
                찾기
              </Button>
            </Box>
          </form>

  react-hook-form에서 formState를 가져와서 disabled설정을 해주었다. 

이러니까 버튼은 항상 disabled이다. 

엔터를 눌렀을 떄는 요청이 정상적으로 1번만 가긴 했다. 

그런데 버튼 클릭이 가능해야하니까 실패

 

[해결3 - 성공]

const onKeyPress = e => {
    if (e.key === 'Enter') {
      e.preventDefault();

      findDetailInfo({
        search: e.target.value,
      });
    }
  };

버튼 disabled를 없애주니까 버튼을 클릭했을 때는 정상적으로 1번만 요청하는데

엔터를 누르니까 2번 요청이 갔다. 

onKeyPress 이벤트에 문제가 있는 듯.

input onKeyPress 함수에 e.preventDefault 함수를 추가해주었다.