reactjs - 警告：在循环调用 API 时遇到两个具有相同密钥的孩子？

Question

我是新手，我正在尝试通过 API 为主页调用一些文本，正在显示文本，但是浏览器控制台正在向“遇到两个具有相同密钥的孩子”错误发送垃圾邮件。此外，API 不断被调用，我将如何解决这个问题？

API

import axios from 'axios'

//BASE URL
const api = {
    baseUrl: 'http://localhost:5029/'
}

export const Hentallehero = (alle) =>{

    //http://localhost:5029/hero
let response = axios.get(api.baseUrl + 'hero')
    .then(res => {
        return res.data
    })
    .catch(error => {
        console.log(error)
        return null //vi svarer med null for at fortælle at noget gik galt = ingen data
    })

        // VIGTIGT - reunere data/null til component som "spørger"
        console.log(response)
        return response
}

家

import React from 'react'
import { useState, useEffect } from 'react'
import spa from '../../img/spa.png'
import leaf from '../../img/leaf.png'

// CSS
import '../../App.css'

// API
import { Hentallehero } from '../../helpers/apikald'


const Home = () => {
    const [hero, setHero] = useState();

    useEffect(() => {
        Hentallehero("heroes").then((resonse) => setHero(resonse))
    });
    return (
        <>
            <img src={leaf} alt="" className="img-fluid" id="leaf" />
            <img src={spa} alt="" className="img-fluid" id="spa" />

            {hero?.map((item) => (
                <div
                    className="container"
                    id=""
                    key={'alleboy'+item}
                >
                    <div className="row">
                        <div className="col-lg-6 col-md-12 col-sm-12">
                            <p id="hero">{item?.titel1}</p>
                            <h1 id="herotitle" style={{ paddingLeft: "2.2em" }}>{item?.title2}</h1>
                        </div>
                    </div>
                </div>
            ))}
        </>

    )
}

export default Home

标签： reactjs