리액트 오류 모음 -1 (useState,mutationMode)

ReactAdmin 라이브러리 사용시 발생한 오류 모음.

1. useState  전달값 이슈 

 

const [status, setStatus] = useState(record && record.note_status);

 

...

return(

...

showStatus && (

                                    <StatusSelector

                                        status={status}

                                        setStatus={setStatus})

 

 

 

StatusSelector.tsx

<TextField

            required

            select

            defaultValue={"STATUS"}

            value={status}

일시 defaultValue 값이 전달이 안되는 오류 발생 .

 

해결방법 - statusSelector 내에 

if (!status) {

        status = "STATUS";

        setStatus("STATUS);

    }

 

 

위 코드 추가 하여 nulll 일시 useState값 전달하여 해결

 

 

2. Edit에 update가 안되는 이슈 

 

• Edit, EditBase로 구현한 UI에 저장버튼 선택 시 dataProvider.update 가 불리지 않는 현상 발생
  • https://stackoverflow.com/a/70409748
  • Edit save버튼은 mutationMode="pessimistic"이어야 동작(undoable 때문에 update가 안됨)

<Edit
      {...props}
      mutationMode="pessimistic"
>

 

 

** 추가

 

디버깅할떄 함수 호출때문에 애를 먹었는데, 작은 실수때문에 발생하여 남긴다. 

 

React공식 문서를 찾아보니 다음과 같이 되어 있다. 

 

==================================================================

 

여기서 주의하셔야 하는 점은, 함수형태를 넣어주어야 하지, 함수를 다음과 같이 실행하시면 안됩니다.

onClick={onIncrease()}

이렇게 하면 렌더링되는 시점에서 함수가 호출되버리기 때문입니다. 이벤트를 설정할때에는 함수타입의 값을 넣어주어야 한다는 것, 주의해주세요.

 <button onClick={onIncrease}>+1</button>