Javascript 如何停止获取缩短URL API的数据，因为它'；s连续添加具有多个不同缩短版本的相同提取链接数据

用于获取我的输入数据，但它不断地获取数据，并使用不同的短url版本添加到我的displayLink数组中。我可以添加另一个链接，它会被添加到其中，但如何阻止它复制或过滤掉单个原始链接

我得到的输出是这样的&它不断地向displayLinks状态添加更多相同的链接，但版本不同

import { useForm } from "react-hook-form";
import axios from 'axios';
import Loading from '../../images/Ripple-1s-200px.svg'

const Shorten = () => {
    // get built in props of react hook form i.e. register,handleSubmit & errors / watch is for devs
    const { register, handleSubmit, formState: {errors} } = useForm();

    //1. set user original values to pass as params to url
    const [link, setLink] = useState('');

    //2. set loader initial values to false 
    const [loading, setLoading] = useState(false);

    //3. pass the fetched short link object into an array so we can map
    const [displayLinks, setDisplayLinks] = useState([]);

    //fetch the shortened url link using async method to show loading
    useEffect(() => {
        let unmounted = false;
        async function makeGetRequest() {
            try {
                let res = await axios.get('https://api.shrtco.de/v2/shorten', { params: { url: link } });
                //hid loader if u get response from api call
                    if (!unmounted && res.data.result.original_link !== displayLinks.original_link) {
                        setLoading(false);
                        //add the data to allLinks array to map
                        return setDisplayLinks(displayLinks => [...displayLinks, res.data.result]);
                    }

                } 
            catch (error) {
                console.log(error, "inital mount request with no data");
            }

        }
        //invoke the makeGetRequest here 
        makeGetRequest();
       
        return () => {
            unmounted = true;
        }

        //passing dependency to re render on change of state value
    }, [displayLinks, link]);

        // onSubmit form log data into a variable
        const onSubmit = (data, event) => {
            event.preventDefault();
            //puttin data in a variable to pass as url parameter if valid
            setLink(data.userLink);
            //add loading here after data is set to state
            setLoading(!false);
        }

    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                <label></label>
                <input
                    {...register("userLink", {required: "Please add a link"})}
                    type="url"
                    id="userLink"
                />
                {errors.userLink && <span>{errors.userLink.message}</span>}
                <input type="submit" />
            </form>
            {
                loading ?
                    <div className="loader" id="loader">
                        <img src={Loading} alt="Loading" />
                    </div>
                        :   <div>
                                {
                                    displayLinks.map((el) => {
                                        return (
                                            <div key={el.code}>
                                                <div>
                                                    <h5>{el.original_link}</h5>
                                                </div>
                                                <div>
                                                    <h5>{el.full_short_link}</h5>
                                                    <button>Copy</button>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                            </div>
            }
        </div>
    )
}

export default Shorten;

从“react hook form”导入{useForm}；
从“axios”导入axios；
从“../../images/Ripple-1s-200px.svg”导入加载
常数缩短=（）=>{
//获取react hook表单的内置道具，即register、handleSubmit和errors/watch是为开发者准备的
常量{register，handleSubmit，formState:{errors}}=useForm（）；
//1.设置用户原始值作为参数传递给url
const[link，setLink]=useState（“”）；
//2.将加载器初始值设置为false
const[loading，setLoading]=useState（false）；
//3.将获取的短链接对象传递到数组中，以便我们可以映射
const[displayLinks，setDisplayLinks]=useState（[]）；
//使用异步方法获取缩短的url链接以显示加载
useffect（（）=>{
让unmounted=false；
异步函数makeGetRequest（）{
试一试{
让res=等待axios.get（'https://api.shrtco.de/v2/shorten“，{params:{url:link}}）；
//hid加载程序，如果从api调用获得响应
如果（！unmounted&&res.data.result.original\u link！==displayLinks.original\u link）{
设置加载（假）；
//将数据添加到要映射的allLinks数组
返回setDisplayLinks（displayLinks=>[…displayLinks，res.data.result]）；
}
} 
捕获（错误）{
log（错误，“没有数据的初始装载请求”）；
}
}
//在这里调用makeGetRequest
makeGetRequest（）；
return（）=>{
未安装=正确；
}
//传递依赖项以在状态值更改时重新呈现
}，[displayLinks，link]）；
//onSubmit表单日志数据到变量中
const onSubmit=（数据、事件）=>{
event.preventDefault（）；
//将数据放入变量中，以便在有效时作为url参数传递
setLink（data.userLink）；
//将数据设置为状态后在此处添加加载
设置加载（！false）；
}
返回(
{errors.userLink&&{errors.userLink.message}
{
加载？
:   
{
displayLinks.map（（el）=>{
返回(
{el.original_link}
{el.full_short_link}
复制
)
})
}
}
)
}
输出默认值缩短；

useEffect在每次传递更改的依赖项时都会被调用。因此，您正在调用API并将结果设置为displayLinks状态变量。现在，由于您已将displayLinks作为依赖项传递给useEffect，因此会再次调用它。你基本上进入了一个无限循环，对。但是我不明白当URL的输入字段没有被触摸/更改时，依赖关系是如何变化的。它确实正确地打印出了第一个响应，但是在不做任何事情的情况下，它再次激发useffect并将第二个响应添加到displayLinks数组中。。对于我应该在这里做什么，我有点困惑。所以不管有没有变化，useffect都会运行一次。这就开始了无休止的呼叫。不使用useeffect是更好的选择吗？还有可能将我的getMakeRequest传递给onSubmit并完全删除useEffect吗？或者这会引起问题吗？告诉我你到底想实现什么。单击时，是否应调用api？如果是这样，那么将api调用移动到onsubmit方法中。