首页 > 解决方案 > 单击按钮后内容显示一秒钟然后消失(React.js)

问题描述

我正在尝试在单击按钮时显示显示和隐藏数据。我正在使用 axios 从自定义 API 中获取数据。当我单击显示按钮时,它会显示数据,但它会在一秒钟后消失。有什么建议么 ?

这是我获取数据的函数

const Test = () => {
    const [quote, setQuote] = useState([]);
    const [toggle, setToggle] = useState(false);

    const toggleFunction = () =>{
        setToggle(!toggle);
    }
    const getData = async() =>{ 
        try{
            const response = await Axios.get("/reminder");

            if(response && response.data){
                setQuote(response.data);

            }
        }catch(error){
            console.log(error);
        }
    }


    useEffect(()=>{
        getData();
    }, [])

这是我调用函数并循环的片段

<div className="divBtn">
                    <button className="styledBtn" type="submit" onClick={toggleFunction}>Show reminders</button>
                </div>
                
            </form>
            {quote.map((single)=>{
                const {id, reminder, time} = single; 
                return(
                    
                    <div key={id}>
                        
                        {toggle ? <LoopReminder id={id} reminder={reminder}/> : null}


                    </div>
                    
                    
                );

            })}

标签: javascriptreactjsapiaxiosmapping

解决方案


推荐阅读