onChange不更新React [英] onChange not updating React

问题描述

在过去的几个小时中，我一直在从事这个项目，我非常确定最后一个小时将是我的最后一个小时.没有出现错误.我的想法是，当我从下拉菜单中选择英雄时，页面将根据我的选择进行更新.我可能有一些无法解决的问题，这是我没有意识到的.

I've been working on this project for the last couple of hours and I was pretty sure that this final hour would be my last. No errors are appearing. My thinking is that when I pick a hero from the drop down, the page will update depending on my choice. I may have something that isn't firing that I'm not picking up on.

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

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

};
const HeroSelect = ({heroSelect, 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();
    }, []);
    return (
        <div>
            <h1>{heroSelect}</h1>
            <select>
                {data.heroes.map(item => (
                    <option key={item.id} value={heroSelect} onChange={onChangeHeadline} >
                        {item.localized_name}
                    </option>
                ))}
            </select>
        </div>
    )
};
export default App

推荐答案

在 Select 标记上而不在 option onChange = {onChangeHeadline} >标签

Define your onChange={onChangeHeadline} on Select tag not on option tag

         <select onChange={onChangeHeadline}>
           {data.heroes.map(item => (
            <option key={item.id} value={item.localized_name}>
             {item.localized_name}
            </option>
            ))}
         </select>

这篇关于onChange不更新React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！