Javascript 从<；中选项的ID中提取数据；选择>；

我正试图根据您的选择从数据库中提取数据。数据来自OpenDotaAPI。当我检查元素时，我可以看到选项标记被正确填充。所以我想我把数据推错了。任何建议都很好

import React, {useEffect, useState} from 'react'
import axios from 'axios'
require("regenerator-runtime/runtime");

const App = () => {
    const [hero,selectedHero] = useState(
        'Select a Hero'
    );
    const [heroDets, selectedheroDets] = useState(
        'Movement Speed'
    );
    const handleChange = event => selectedHero(event.target.value) && selectedheroDets(event.target.id);
    return(
        <HeroSelect heroDetails={heroDets} heroSelect={hero} onChangeHeadline={handleChange} />
    );

};
const HeroSelect = ({heroSelect, heroDetails, onChangeHeadline}) => {
    const [data, setData] = useState({heroes: []});
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'https://api.opendota.com/api/heroStats',
            );
            setData({...data, heroes: result.data});
            console.log(result.data);
        };
        fetchData();
    }, []);
    return (
        <div>
            <select id={heroDetails} value={heroSelect} onChange={onChangeHeadline} >
                {data.heroes.map(item => (
                    <option id={item.move_speed}>
                        {item.localized_name}
                    </option>
                ))}
            </select>
            <h1>{heroSelect}</h1>
            <h1>{heroDetails}</h1>
        </div>

    )
};
export default App

import React，{useffect，useState}来自“React”
从“axios”导入axios
要求（“再生器运行时/运行时”）；
常量应用=（）=>{
const[hero，selectedHero]=使用状态(
“选择英雄”
);
常量[heroDets，selectedheroDets]=useState(
“移动速度”
);
const handleChange=event=>selectedHero（event.target.value）和&selectedheroDets（event.target.id）；
返回(
);
};
常量HeroSelect=（{HeroSelect，heroDetails，onChangeHeadline}）=>{
const[data，setData]=useState（{heroes:[]}）；
useffect（（）=>{
const fetchData=async（）=>{
常量结果=等待axios(
'https://api.opendota.com/api/heroStats',
);
setData（{…数据，英雄：result.data}）；
console.log（result.data）；
};
fetchData（）；
}, []);
返回(
{data.heroes.map（项=>(
{item.localized_name}
))}
{heroSelect}
{heroDetails}
)
};
导出默认应用程序

我不认为你给出结果的方式。我对你的代码做了几处修改，得到了准确的结果。 我在这里做的是在child组件中添加了一个额外的函数，它将一个对象传递给child，这里的对象由值和Id组成。希望您现在得到一个解决方案。 还要检查stackblitz的实现

import React，{useffect，useState}来自“React”
从“axios”导入axios
要求（“再生器运行时/运行时”）；
常量应用=（）=>{
const[hero，selectedHero]=使用状态(
“选择英雄”
);
常量[heroDets，selectedheroDets]=useState(
“移动速度”
);
const handleChange=事件=>{
//事件是包含子组件的值和id的对象。
selectedHero（事件值）；
选择Herodets（event.id）；
}
返回(
);
};
常量HeroSelect=（{HeroSelect，heroDetails，onChangeHeadline}）=>{
const[data，setData]=useState（{heroes:[]}）；
useffect（（）=>{
const fetchData=async（）=>{
常量结果=等待axios(
'https://api.opendota.com/api/heroStats',
);
setData（{…数据，英雄：result.data}）；
};
fetchData（）；
}, []);
const getSelected=事件=>{
//在这里添加了一个额外的函数，它将值和id传递给应用程序组件。
onChangeHeadline（{value:event.target.value，id:data.heroes[event.target.selectedIndex].move\u speed}）
}
返回(
{data.heroes.map（项=>(
{item.localized_name}
))}
{heroSelect}
{heroDetails}
)
};
导出默认应用程序

import React, {useEffect, useState} from 'react'
import axios from 'axios'
require("regenerator-runtime/runtime");

const App = () => {
    const [hero,selectedHero] = useState(
        'Select a Hero'
    );
    const [heroDets, selectedheroDets] = useState(
        'Movement Speed'
    );
    const handleChange = event => {
      // event is an object which contains the value and id from the child component.
      selectedHero(event.value);
      selectedheroDets(event.id);
    }
    return(
        <HeroSelect heroDetails={heroDets} heroSelect={hero} onChangeHeadline={handleChange} />
    );

};
const HeroSelect = ({heroSelect, heroDetails, onChangeHeadline}) => {
    const [data, setData] = useState({heroes: []});
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
                'https://api.opendota.com/api/heroStats',
            );
            setData({...data, heroes: result.data});
        };
        fetchData();
    }, []);
    const getSelected=event=>{
      // added an extra function here, which passes the value and id to the app component.
      onChangeHeadline({value: event.target.value, id:data.heroes[event.target.selectedIndex].move_speed})
    }
    return (
        <div>
            <select id={heroDetails} value={heroSelect} onChange={getSelected} >
                {data.heroes.map(item => (
                    <option id={item.move_speed}>
                        {item.localized_name}
                    </option>
                ))}
            </select>
            <h1>{heroSelect}</h1>
            <h1>{heroDetails}</h1>
        </div>

    )
};
export default App