[React]Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

Warning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

 

-원인: input tag에 readOnly를 사용하거나, value를 defaultValue로 사용하도록 권장하는 warning 인것 같다.

1.때문에 readOnly를 사용했더니 input value가 읽기만 가능한 형태로 수정 되어 input 내 value를 수정할수가 없고,

2.defaultValue로 변경시 계속해서 비동기로 데이터 불러올때 초기 데이터값으로만 남아있었다.

 

 

하단 코드는 오류 발생 코드와 해결 코드이다. 혹시라도 비슷한 이유로 에러가 났을 경우 참고했으면 한다.

 

설명을 하자면, 1.오류발생 코드의 경우 

input 내에 defaultValue를 설정해 주지 않은것, default value값이 현재 페이지에서 onChange 되는 것이 아니라 useLocation을 통해 들어온 state값으로 주입되어 있기 때문에 발생한 것으로 보인다. 즉 onChange 되는 input value값이 코드 내에서 생성되지 않기 때문에 고정 default 값 즉 state내의 value값으로 고정되어 있는 것이다.

////////1.오류발생
const EditPage = () => {
  const state = useLocation().state[0];
  const [inputBoxs, setInputBoxs] = useState({
    title: "",
    totalPage: 0,
    untilPage: 0,
    category: "사회",
    readCount: 0,
  });
  
  useEffect(()=>{
  	axios.get(commonurl +"getInfo").then((res)=>{
    	if(res.data){
        	setInputBoxs({
            	title: res.data.list.title,
                totalPage:res.data.list.totalPage
                [...]
            })
        }
    })
  },[setInputBoxs])
  
    const onChangeInput = (e) => {
    setInputBoxs({ ...inputBoxs, [e.target.name]: e.target.value });
  };
 return (
 	<div>
    [...]
          <input
            className="w-2/3 font-normal text-sm bg-transparent border-[0.5px]
      rounded-lg p-2 outline-none text-right"
            name="untilPage"
            value={
              state.untilPage 
            } ////오류발생부분
            onChange={(e) => {
              onChangeInput(e);
            }}
          />
    )}
    [...]
	</div>
    )
  }
  
  export default EditPage;

해당 오류를 수정하기 위해서는 두가지 값이 필요했다.

1)onChange 함수를 실행했을때 변경 되는 값 과 2) 실행하지 않았을때 기존에 있던 default 값,

때문에 defaultValue에 삼항 다항식으로 기존 useLocation에서 들어오는 state값이 있을경우 state값을 value로 보여주고, 그 값이 없거나 onChange내에서 변경을 감지하면 inputBoxs의 value로 보여줄 수 있도록 코드를 변경해보았다.

////////2.오류 수정
const EditPage = () => {
  const state = useLocation().state[0];
  const [inputBoxs, setInputBoxs] = useState({
    title: "",
    totalPage: 0,
    untilPage: 0,
    category: "사회",
    readCount: 0,
  });
  
    const onChangeInput = (e) => {
    setInputBoxs({ ...inputBoxs, [e.target.name]: e.target.value });
  };
 return (
 	<div>
    [...]
          <input
            className="w-2/3 font-normal text-sm bg-transparent border-[0.5px]
      rounded-lg p-2 outline-none text-right"
            name="untilPage"
            defaultValue={
              state.untilPage ? state.untilPage : inputBoxs.untilPage
            }
            onChange={(e) => {
              onChangeInput(e);
            }}
          />
    )}
    [...]
	</div>
    )
  }
  
  export default EditPage;