从子组件的map()函数的父组件中添加道具

问题描述 投票:0回答:1

我有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()函数中从父级访问道具?

reactjs
1个回答
0
投票

您使用的道具不正确,请像这样使用它:

© www.soinside.com 2019 - 2024. All rights reserved.