본문 바로가기

A.개발관련자료

[0]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를 수정할수가 없고,

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

때문에 비동기로 데이터를 불러올때 데이터 불러오기전 빈배열로 초기화 로직을 추가해서 해결하였다.

 

const Book = () => {
  const [bookinfo, setBookinfo] = useState([]);
  const getInformation = (value) =>{
  	setBookInfo([])
    axios.get(
    ..
    )
  }
  
 return (
 	<div>
    [...]
    {bookinfo.map(el,idx)=>(
        <input 
         key={idx}
   		 defaultValue={el.title}
    	/>
    )}
    [...]
	</div>
    )
  }
 export default Book;