오류 메시지 "li: 'key' is not prop" (키: 프로펠러가 아닙니다)가 표시됩니다.

오류 메시지 "li: 'key' is not prop" (키: 프로펠러가 아닙니다)가 표시됩니다.

리액트(버전 15.4.2)를 사용하고 있으며,<ul>데이터베이스로부터의 쿼리 결과에 따라 동적으로 처리됩니다.'키' 속성을 설정했다고 생각했습니다.<li>s는 맞지만, 분명히 그렇지 않습니다.목록이 렌더링되면 다음 오류가 나타납니다.

경고: li: '키'는 소품이 아닙니다.액세스하려고 하면 '정의되지 않음'이 반환됩니다.하위 구성 요소 내에서 동일한 값에 액세스해야 하는 경우 다른 소품으로 전달해야 합니다.

내 목록 코드는 다음과 같습니다.

function UserList(props) {
    return(
        <ul className="UserList">
            {
                props.user_list.map((user) => (
                    <li className="UserListItem" key={user.id}>
                        <Link to={`/users/${user.id}`}>{user.first_name} {user.last_name}</Link>
                    </li>
                ))
            }
        </ul>
    );
}

서류를 봤는데 이게 맞는 것 같아요누군가 제 잘못을 밝혀주시면 감사하겠습니다.

코드상의 다른 곳에서 소품에 접근하려고 하는 거죠열쇠

기본적으로 "키" 소품은 하위 구성요소로 전달되지 않습니다.

React 문서는 다음과 같이 말합니다. "특수 소품(ref 및 key)은 React에 의해 사용되므로 컴포넌트에 전송되지 않습니다."

리액트 조각으로 리액트를 포장할 수 있습니다.

{props.user_list.map((user, index) => (
         <React.Fragment key={index}>
           <li className="UserListItem" >
             <Link to={`/users/${user.id}`}>{user.first_name} {user.last_name}</Link>
           </li>
         </React.Fragment>
    ))
}

내가 제안하고 싶은 것은, 만약 당신이 그 일을 한다면 어떤 일이 일어날지 보는 것이다.props.user_list.map((user, index)및 을 위해key줘봐index대신user.id.

이 프로세스로 경고가 사라지면 중복이 있음을 합리적으로 확인할 수 있습니다.id를 위해user이 경우 사용자 목록을 생성하는 백엔드에 주의를 기울이는 것이 좋습니다.어떻게 있다.id작성되었습니까?사용자를 일의로 식별하기 위해 UUID를 살펴보는 것이 좋습니다.

이 테스트가 계속되면 리액트 버전을 업그레이드해 볼 것을 권장합니다만, 그럴 가능성은 매우 낮습니다.

user.id가 중복되었을 수 있습니다.다시 확인해 주세요.

PropTypes를 사용하여 다음과 같은 소품을 검증하는 경우:

Progress.propTypes = {
    labels: PropTypes.array.isRequired,
    tab: PropTypes.func.isRequired,
    key: PropTypes.number.isRequired. <!--- this line will trigger the error--->
}

이 오류를 제거하려면 PropTypes 검사에서 '키'를 제거하십시오.

언급URL : https://stackoverflow.com/questions/42261505/getting-error-message-li-key-is-not-a-prop