Each child in a list should have a unique "key" prop.

dev_archive_v·2025년 3월 18일

react

목록 보기
8/9

Error💥

Each child in a list should have a unique "key" prop. Check the render method of `MapResult`.

원인
map메서드에서 각 jsx요소들은 key가 각각 필요한데 다음의 코드를 보면 key값을 주지 않았다.

       {
                        Object.keys(pharmacy).map(
                            (key) => {
                                const index = Number(key);
                                const url = `/searchPharmacy/${index}`
                                return (<>
                                    <Link to={url} state={{ data: pharmacy[index] }}>{pharmacy[index].place_name}</Link>
                                    <p >주소 : {pharmacy[index].road_address_name}</p>
                                    <p >거리 : {pharmacy[index].distance}</p>
                                </>)
                            }
                        )
                    }

해결

div로 감싸주고 각 key값에 indey를 할당했다.

{
	Object.keys(pharmacy).map( (key) => {
      const index = Number(key);
	  const url = `/searchPharmacy/${index}`
	  return (
        <div key={index}>
	   	<Link to={url} state={{ data: pharmacy[index] }}>	
      			{pharmacy[index].place_name}</Link>
		<p>주소 : {pharmacy[index].road_address_name}</p>
        <p>거리 : {pharmacy[index].distance}</p>
        </div>)
     }
   )
}

0개의 댓글