在这个简单的React App中,我不明白为什么收到以下警告消息:
警告:列表中的每个孩子都应该有一个唯一的“关键”道具。
对我来说,我似乎以key = {item.login.uuid}]的形式在正确的位置放置了密钥] >> 如何摆脱警告消息?放置钥匙的正确位置在哪里?
App.js
import UserList from './List' const App = props => { const [id, newID] = useState(null) return ( <> <UserList id={id} setID={newID} /> </> ) } export default App
List.js
const UserList = ({ id, setID }) => { const [resources, setResources] = useState([]) const fetchResource = async () => { const response = await axios.get( 'https://api.randomuser.me' ) setResources(response.data.results) } useEffect(() => { fetchResource() }, []) const renderItem = (item, newID) => { return ( <> {newID ? ( // User view <div key={item.login.uuid}> <div> <h2> {item.name.first} {item.name.last} </h2> <p> {item.phone} <br /> {item.email} </p> <button onClick={() => setID(null)}> Back to the list </button> </div> </div> ) : ( // List view <li key={item.login.uuid}> <div> <h2> {item.name.first} {item.name.last} </h2> <button onClick={() => setID(item.login.uuid)}> Details </button> </div> </li> )} </> ) } const user = resources.find(user => user.login.uuid === id) if (user) { // User view return <div>{renderItem(user, true)}</div> } else { // List view return ( <ul> {resources.map(user => renderItem(user, false))} </ul> ) } } export default UserList
在这个简单的React App中,我不明白为什么会收到以下警告消息:警告:列表中的每个孩子都应该有一个唯一的“键”道具。在我看来,我把钥匙放在了右边...
key
必须位于循环内的根级元素上。您的情况就是片段(<>
)。
为了做到这一点,您需要将其完整写出:
如果您创建2个单独的组件,一个用于用户视图,一个用于列表项,该怎么办?这样,您只需要传递用户属性即可。另外,使用JSX并从那里传递wht键。