Javascript 反应加载味精_Javascript_Reactjs_Use Effect

Javascript 反应加载味精

javascript reactjs

Javascript 反应加载味精,javascript,reactjs,use-effect,Javascript,Reactjs,Use Effect,我正在开发一个react应用程序，它可以在点击按钮后缩短URL。我很难想出这样做的最佳逻辑。单击按钮时，加载消息不会显示。加载按钮出现，然后在消息加载时消失下面代码的当前行为如下所示当它呈现“加载…”时不显示我点击我的“缩短”按钮，“加载…”显示缩短的url显示在“加载…”按钮下方 Shorten.js import { useEffect, useState } from "react"; const Shorten = () => { const

我正在开发一个react应用程序，它可以在点击按钮后缩短URL。我很难想出这样做的最佳逻辑。单击按钮时，加载消息不会显示。加载按钮出现，然后在消息加载时消失

下面代码的当前行为如下所示

当它呈现“加载…”时不显示

我点击我的“缩短”按钮，“加载…”显示

缩短的url显示在“加载…”按钮下方

Shorten.js

import { useEffect, useState } from "react";

const Shorten = () => {
    const [shortLink, setShortLink] = useState(null);
    const [isPending, setIsPending] = useState(false);
    const [input, setInput] = useState('example.org/very/long/link.html');
    const url = "https://api.shrtco.de/v2/shorten?url=";

    const fullUrl = (url.concat(input));
    console.log(fullUrl);
    useEffect(() => {
        fetch(fullUrl)
        .then(res => {
            return res.json();
        })
        .then(data => {
            setShortLink(data.result.short_link);
            // setIsPending(false);
        })
    }, [fullUrl ])
    // input
    // value={input} 
    const loadMsg = () =>{
        setIsPending(true);
    }
    return (
        <main>
            <section className="purple-card">
                <input  onInput={e => setInput(e.target.value)} type="text" placeholder="Shorten a link here..." className="shorten-input"/>
                <button className="shorten-it" onClick={() => loadMsg()}>Shorten It!</button> 
            </section>
            <section className="white-card">
                {isPending && <div className="loading-text">Loading...</div>}
                {shortLink && <div className="shorten-text">{shortLink}</div>}
                <hr></hr>
                <button className="shorten-it" >Copy</button> 
            </section>
        </main>
    );
}
 
export default Shorten;

从“react”导入{useffect，useState}；
常数缩短=（）=>{
const[shortLink，setShortLink]=useState（null）；
const[isPending，setIsPending]=useState（false）；
const[input，setInput]=useState（'example.org/very/long/link.html'）；
常量url=”https://api.shrtco.de/v2/shorten?url=";
constfullurl=（url.concat（输入））；
log（fullUrl）；
useffect（（）=>{
获取（完整URL）
。然后（res=>{
返回res.json（）；
})
。然后（数据=>{
设置短链接（数据.结果.短链接）；
//设置显示（假）；
})
}，[fullUrl]）
//输入
//值={input}
const loadMsg=（）=>{
setIsPending（true）；
}
返回(
setInput（e.target.value）}type=“text”placeholder=“在此处缩短链接…”className=“缩短输入”/>
loadMsg（）}>缩短它！
{isPending&&Loading…}
{shortLink&&{shortLink}

复制
);
}
输出默认值缩短；

这里似乎有一些问题。加载消息和缩短的URL同时显示的原因是它们的呈现条件不是相互排斥的。修复这个问题非常简单，在加载组件时不显示缩短的URL

另一个可能导致问题的原因是“缩短它！”按钮不能控制实际执行缩短操作，它只是将加载（挂起）状态设置为

true

。只要输入值发生更改，缩短操作就会运行。基本上，荷载状态和缩短作用是相互独立的

要解决此问题，您应仅在用户单击按钮时运行缩短操作，并在此时将

isPending

状态同时设置为

true

（完成后再设置回

false

）

您可以只使用在单击按钮时调用的函数，而不是

useffect

例如：

import { useState, useCallback } from "react";

const Shorten = () => {
    const [shortLink, setShortLink] = useState(null);
    const [isPending, setIsPending] = useState(false);
    const [input, setInput] = useState('example.org/very/long/link.html');

    const shortenUrl = useCallback(() => {
        setIsPending(true);
        const baseUrl = "https://api.shrtco.de/v2/shorten?url=";
        const fullUrl = baseUrl + input;
        fetch(fullUrl)
            .then(res => res.json())
            .then(data => {
                setShortLink(data.result.short_link)
            })
            .finally(() => setIsPending(false));
    }, [input]);

    return (
        <main>
            <section className="purple-card">
                <input  onInput={e => setInput(e.target.value)} type="text" placeholder="Shorten a link here..." className="shorten-input"/>
                <button className="shorten-it" onClick={shortenUrl}>Shorten It!</button> 
            </section>
            <section className="white-card">
                {isPending && <div className="loading-text">Loading...</div>}
                {!isPending && shortLink && <div className="shorten-text">{shortLink}</div>}
                <hr></hr>
                <button className="shorten-it" >Copy</button> 
            </section>
        </main>
    );
}

export default Shorten;

const result = useMemo(() => {
    if (isPending) {
        return <div className="loading-text">Loading...</div>;
    }
    if (shortLink) {
        return <div className="shorten-text">{shortLink}</div>;
    }
    return null;
}, [isPending, shortLink]);

从“react”导入{useState，useCallback}；
常数缩短=（）=>{
const[shortLink，setShortLink]=useState（null）；
const[isPending，setIsPending]=useState（false）；
const[input，setInput]=useState（'example.org/very/long/link.html'）；
常量shortenUrl=useCallback（（）=>{
setIsPending（true）；
常量baseUrl=”https://api.shrtco.de/v2/shorten?url=";
const fullUrl=baseUrl+input；
获取（完整URL）
.then（res=>res.json（））
。然后（数据=>{
设置短链接（数据.结果.短链接）
})
.最后（（）=>setIsPending（false））；
}，[输入]；
返回(
setInput（e.target.value）}type=“text”placeholder=“在此处缩短链接…”className=“缩短输入”/>
缩短它！
{isPending&&Loading…}
{！isPending&&shortLink&&{shortLink}

复制
);
}
输出默认值缩短；

或者，为了使加载/结果更加互斥，可以使用加载消息、结果URL或nothing的值定义单个变量。例如：

import { useState, useCallback } from "react";

const Shorten = () => {
    const [shortLink, setShortLink] = useState(null);
    const [isPending, setIsPending] = useState(false);
    const [input, setInput] = useState('example.org/very/long/link.html');

    const shortenUrl = useCallback(() => {
        setIsPending(true);
        const baseUrl = "https://api.shrtco.de/v2/shorten?url=";
        const fullUrl = baseUrl + input;
        fetch(fullUrl)
            .then(res => res.json())
            .then(data => {
                setShortLink(data.result.short_link)
            })
            .finally(() => setIsPending(false));
    }, [input]);

    return (
        <main>
            <section className="purple-card">
                <input  onInput={e => setInput(e.target.value)} type="text" placeholder="Shorten a link here..." className="shorten-input"/>
                <button className="shorten-it" onClick={shortenUrl}>Shorten It!</button> 
            </section>
            <section className="white-card">
                {isPending && <div className="loading-text">Loading...</div>}
                {!isPending && shortLink && <div className="shorten-text">{shortLink}</div>}
                <hr></hr>
                <button className="shorten-it" >Copy</button> 
            </section>
        </main>
    );
}

export default Shorten;

const result = useMemo(() => {
    if (isPending) {
        return <div className="loading-text">Loading...</div>;
    }
    if (shortLink) {
        return <div className="shorten-text">{shortLink}</div>;
    }
    return null;
}, [isPending, shortLink]);

const result=useMoom（（）=>{
如果（iSping）{
返回装载。。。；
}
如果（短链接）{
返回{shortLink}；
}
返回null；
}，[isPending，shortLink]）；

然后这样渲染：

<section className="white-card">
    {result}
</section>


{result}