时间戳

首页 > 解决方案 > 如何在反应中从列表项onclick从子项到父项获取映射数据

reactjs - 如何在反应中从列表项onclick从子项到父项获取映射数据

问题描述

嘿刚刚学习反应，我正在尝试将数据从子组件中的单击项目获取到父组件。如果我使用“data-value(item.city)”，我可以获得单个值，但我试图获取整个数组，当我只执行“data-value(item)”时，它给了我 [object][object ]。甚至不确定使用数据值是否是正确的方法。

另外作为一个额外的问题，我想知道是否有更好的方法来编写多个 api 调用，或者如果像这样链接它们是可以接受的，我应该使用 async/await 吗？

子组件

import React from "react";
import { Container, Card, ListGroup } from "react-bootstrap";

const WeatherPanel = (props) => {
    return (
        <div>
            <Container fluid>
                <Card style={{ width: "50%", boxShadow: "0  0  10px 2px lightgrey" }}>
                    <Card.Header> Favorite Location</Card.Header>
                    <ListGroup variant="flush">
                        <ListGroup.Item>
                            {props.data.map((item, index) => (
                                <ListGroup.Item key={item.id} data-value={item} onClick={props.handleClick}>
                                    <img src={`http://openweathermap.org/img/wn/${item.icon}@2x.png`} alt="Weather Icon" />
                                    {item.city}
                                </ListGroup.Item>
                            ))}
                        </ListGroup.Item>
                    </ListGroup>
                </Card>
            </Container>
        </div>
    );
};

export default WeatherPanel;

父组件

import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";
import React, { useEffect, useState } from "react";
import axios from "axios";

import { Container } from "react-bootstrap";

import WeatherPanel from "./components/WeatherPanel/WeatherPanel.jsx";
import Header from "./components/Header/Header";

function App() {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = () => {


            axios
                .get(`https://api.openweathermap.org/data/2.5/weather?q=${"Ottawa"}&appid=${key}`)
                .then((res) => {
                    setData((data) => [...data, { description: res.data.weather[0].description, icon: res.data.weather[0].icon, temp: res.data.main.temp, city: res.data.name, id: res.data.id }]);
                    return axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${"Toronto"}&appid=${key}`);
                })
                .then((res) => {
                    setData((data) => [...data, { description: res.data.weather[0].description, icon: res.data.weather[0].icon, temp: res.data.main.temp, city: res.data.name, id: res.data.id }]);

                    return axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${"Montreal"}&appid=${key}`);
                })
                .then((res) => {
                    setData((data) => [...data, { description: res.data.weather[0].description, icon: res.data.weather[0].icon, temp: res.data.main.temp, city: res.data.name, id: res.data.id }]);

                    return axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${"Vancouver"}&appid=${key}`);
                })
                .then((res) => {
                    setData((data) => [...data, { description: res.data.weather[0].description, icon: res.data.weather[0].icon, temp: res.data.main.temp, city: res.data.name, id: res.data.id }]);
                    return axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${"California"}&appid=${key}`);
                })
                .then((res) => {
                    setData((data) => [...data, { description: res.data.weather[0].description, icon: res.data.weather[0].icon, temp: res.data.main.temp, city: res.data.name, id: res.data.id }]);
                })
                .catch((err) => {
                    console.log(err);
                });
        };
        fetchData();
    }, []);

    const handleClick = (event, index) => {
        console.log(event.target.dataset.value);
        //What do I need to do?
    };

    return (
        <div className="App">
            <Header />
            <Container>
                <WeatherPanel data={data} handleClick={handleClick} />
            </Container>
        </div>
    );
}

export default App;

标签： reactjsaxiosonclick

解决方案

data-value 是一个字符串属性，将项目转换为字符串

<ListGroup.Item key={item.id} data-value={JSON.stringify(item)} />

我会使用并行方法调用 API

useEffect(() => {

        const fetchSingle = (city) => {
            return axios
                .get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}`)
                .then((res) => {
                    setData((data) => [...data, { description: res.data.weather[0].description, icon: res.data.weather[0].icon, temp: res.data.main.temp, city: res.data.name, id: res.data.id }]);
        }
        const fetchData = () => {
            const many = [
                fetchSingle("Ottawa"),
                fetchSingle("Toronto"),
                fetchSingle("Montreal"),
                fetchSingle("Vancouver")
            ]

             Promise.all(many).catch((err) => {
                 console.log(err);
             });
        };
        fetchData();
    }, []);

推荐阅读