在这个简单的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