我有2个组成部分。父母和孩子。这是我的孩子组件:
import React, {useState, useEffect} from 'react';
const Users = (props) => {
const [users, setUsers] = useState([]);
let [respo, setA] = useState('name');
useEffect(() => {
fetchData();
console.log('effect')
}, []);
const fetchData = async () => {
const url = `https://api.github.com/users/hadley/repos`;
const response = await fetch(url, {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
}
);
const data = await response.json();
setUsers(data)
// console.log(res)
};
fetchData();
function mapping() {
return (
users.map((i, k) => <li key={k}>{i.props.details}</li>)
)
}
return (
<div>
<ul>
{mapping()}
</ul>
</div>
);
};
export default Users;
在我的父级组件中,我向孩子发送了一个道具:
<Tabs type="card">
<TabPane tab="Tab Title 1" key="1">
<Users details="name"/>
</TabPane>
<TabPane tab="Tab Title 2" key="2">
<Users details="id"/>
</TabPane>
<TabPane tab="Tab Title 3" key="3">
</Tabs>
我试图在这里访问道具:users.map((i, k) => <li key={k}>{i.props.details}</li>)
为什么我无法在map()函数中从父级访问道具?
您使用的道具不正确,请像这样使用它: