Javascript 反应：html中不需要的箭头

解决方案：正如@prasanth所建议的，我创建了一个假下拉列表，一个占位符。 无论是假的还是真的下拉列表都有一个共同点

style={{"display":countryChange?"":"none"}}

很明显，真的和假的是相反的。一旦我ping了api，我就隐藏了真实的api，并显示了假的api。一旦api返回值，我就编写状态，这样伪值就消失了。工作得很有魅力

我是一个新的反应者，尝试根据api调用进行动态下拉。我在/available_国家有一个本地api，返回{国家：巴西和美国}。我希望这两个字段能够动态地创建，并且它几乎按照预期工作

问题是：在第一次点击中，我得到了这个奇怪的箭头。如果我再点击一两次，它就正常了

无点击：

首先单击“怪异箭头”，然后使用“怪异箭头”可以在这两个国家/地区之间导航：

在一行中单击“输入/输出”或两次，将成为所需的输出：

没有任何CSSweird箭头仍在此处：

守则：

import React,{useState} from 'react';
import {Link} from 'react-router-dom';
import './styles.css';
import api from '../../services/api';

export default function Signup(){
    var [countriesObj, setCountriesObj] = useState(<option>Select your country</option>)
    async function getAvaliableCountries(){
        setCountriesObj();
        try{
            const response = await api.get(
                'avaliable_countries','',
                {headers: {
                    'Content-Type':"application/json",   
                }        
                });
                window.arrayOfCountries = response.data.countries ; 
                let countriesList = (window.arrayOfCountries.map((data) =>
                <option>
                    {data}
                </option>)               
            );
            setCountriesObj(countriesList);
        }catch(err){
            alert('Error obtaining the list of countries.')
        }
    }


    return(
        <div className="wrapper">
            <div id="formContent">        
            <h2 className="inactive underlineHover"> 
            <Link to="/">Sign In</Link>
            </h2>
            <h2 className="active">                
            Sign Up
            </h2>     
            <form>
                <select
                onClick={getAvaliableCountries}
                name="animal"
                className="form-control">
                {countriesObj}
                </select>    
            </form>    
            <div id="formFooter">                   
            </div>        
        </div>
        </div>
    );
}  

---

您可以这样做。组件在数组中使用不是很好的做法。因此，在渲染时使用Arraymap提取组件。并且不要忘记使用“在贴图上”子选项

更新： 在组件装载时加载阵列，而不是单击。试着用这个来反应

---

您可以这样做。组件在数组中使用不是很好的做法。因此，在渲染时使用Arraymap提取组件。并且不要忘记使用“在贴图上”子选项

更新： 在组件装载时加载阵列，而不是单击。试着用这个来反应

---

请检查您的css，必须有一些类似css的内容：；这是这种风格的最大问题。

---

这不是因为react，这是css问题，所以请检查选择的css style.css。

请检查您的css，一定有一些类似css的内容：；这是这种风格的最大问题。

---

这不是因为react，而是css问题，所以请检查select的css style.css。

这实际上与react无关，您可以使用简单的css删除箭头：

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;       /* Remove default arrow */
    background-image: url(...);   /* Add custom arrow */
}

---

有关更多信息，您可以在此处看到原始答案：

这实际上与React无关，您可以使用简单的CSS删除箭头：

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;       /* Remove default arrow */
    background-image: url(...);   /* Add custom arrow */
}

---

有关更多信息，您可以在此处看到原始答案：

谢谢您的回答！但我不认为这是真正的css，我删除了每一个css和奇怪的箭头仍然存在！请告诉浏览器和版本，81.0.4044.138谢谢你的回答！但我不认为这是真正的css，我删除了每一个css和奇怪的箭头仍然存在！你能告诉浏览器和versionChrome吗，81.0.4044.138刚刚复制了你的代码，它给出了与godamn箭头完全相同的输出@RoniAntonio.检查更新的代码和Hi@prashanth，即使在你的演示中，我也能复制godamn箭头。如果单击下拉菜单，将触发该功能，然后等待3秒钟，箭头将出现。此外，我真的需要下拉列表有一个默认值“单击此处选择您的国家”，这样一旦用户单击，就会触发api调用。因此，在我的代码的其他部分中，一个下拉列表将有一个选项列表，该列表基于用户在另一个下拉列表中选择的值，即我选择的国家印度，然后州下拉列表显示所有印度州。因此，我正在寻找的解决方案不能依赖于组件装载，它应该在运行时更新：@Ronitonio。它不适合每次单击加载。这就是为什么您也会遇到选择箭头问题。对于组件装载，在显示select之前完成执行。这取决于您的internet和服务器速度。如果您需要一个状态名称，您只需点击“国家/地区选择”按钮的更改事件值。或者，您需要使用一些占位符组件。单击占位符加载api调用，然后显示select按钮刚刚复制了您的代码，它给出了与godamn箭头完全相同的输出@RoniAntonio.检查更新的代码和Hi@prashanth，即使在你的演示中，我也能复制godamn箭头。如果单击下拉菜单，将触发该功能，然后等待3秒钟，箭头将出现。此外，我真的需要下拉列表有一个默认值“单击此处选择您的国家”，这样一旦用户单击，就会触发api调用。因此，在我的代码的其他部分中，一个下拉列表将有一个选项列表，该列表基于用户在另一个下拉列表中选择的值，即我选择的国家印度，然后州下拉列表显示所有印度州。因此，我正在寻找的解决方案不能依赖于组件装载，它应该在运行时更新：@Ronitonio。它不适合每次单击加载。这就是为什么您也会遇到选择箭头问题。对于组件装载，在显示选择之前完成执行。这取决于您的internet和服务器速度。如果您需要状态名称，只需pic 国家/地区选择按钮更改事件的值。或者，您需要使用一些占位符组件。单击占位符加载api调用，然后显示选择按钮