ReactJS 从地图项向模式发送数据

Question

我有一张地图，它呈现很少的项目，当地图选择的模态中的一个元素应该在模态中加载有关此选定项目的 id 的数据时，我需要。 像这样：

                          <ListGroup>
                            {userinfo.map(item =>
                                (
                                    <>
                                        <ListGroup.Item key={item.id} onClick={handlePassInfoShow}> 
                                       {item.name}</ListGroup.Item>                      
                                    </>
                                )
                            )}
                        </ListGroup>
                          <ModalPassInfo
                            modelClose={() => handlePassInfoClose()}
                            modelShow={showPaaInfo}
                            //id={item.id}
                            setshowPaaInfo={setshowPaaInfo}
                        />

在这里，我通过用户数组进行映射，并使用 onClick 模式向每个数组添加一个列表组项。现在，每当在地图中单击某些内容时，都应该打开模式并读取有关所选项目的数据。 我的模态也是这样。

const ModalPassInfo = ({modelShow, modelClose, id, showPaaInfo}) => {

const ref = React.createRef();
const [isError, setError] = useState(false);
const [isLoading, setLoading] = useState(true);

const [country_list, setCountries] = useState([]);
const [message, setMessage] = useState("");
const [data, setData] = useState({
   //data about user
});
useEffect(() => {
    loadNetwork();
}, []);

const loadNetwork = () => {
    setLoading(true);
    setError(false);
    const selector = api.getItems("selector", {
        tables: "country_list"
    }).then(res => {
        let response = res.data;
        setCountries(response.country_list);
    });
    const data = api.getItems(`user-info/${id}`, {
    }).then(res => {
        let response = res.data;
        setData(response);
    });

    Promise.all([selector, data]).then(res => {
        console.log(res);
        setError(false);
        setLoading(false);
    }).catch(e => {
        console.log(e);
        setMessage(e.toString());
        setLoading(false);
        setError(true);
    });
};

const onRefresh = () => {
    loadNetwork();
};

if (isError) {
    return <ErrorMessage message={message} onRefresh={onRefresh}/>
}

if (isLoading) {
    return <Loader/>
}

如果我转到该页面，模式会立即加载。在 onClick 期间，仅检索最后一个项目 id。 和 moy consts

const [showPaaInfo, setshowPaaInfo] = useState(false);
const handlePassInfoClose = () => setshowPaaInfo(false);
const handlePassInfoShow = () => {
    setshowPaaInfo(true)
};

我的问题是。单击该项目时，地图上的任何项目都应向模式发送一个 id。我哪里错了？

Answer 1

定义一种状态

const [show, setShow] = React.useState(false);

功能

const handlePassInfoShow = (data){
 setShow(true);
 console.log(data);
}

改成

                        <ListGroup>
                            {userinfo.map(item =>
                                (
                                    <>
                                        <ListGroup.Item key={item.id} onClick={()=>handlePassInfoShow(item)}> 
                                       {item.name}</ListGroup.Item>                      
                                    </>
                                )
                            )}
                        </ListGroup>
                       {show && ( <ModalPassInfo
                            modelClose={() => handlePassInfoClose()}
                            modelShow={showPaaInfo}
                            //id={item.id}
                            setshowPaaInfo={setshowPaaInfo}
                         />
                         )}