UseEffect - 使用状态创建外部 Link

Question

我有一个方法 getUrl() 调用 API 端点

  useEffect(() => {
    getUrl()
      .then(x => x.json())
      .then(x => {
        const { result } = x;
      });
  });

我可以在控制台中看到我页面中的调用，如您在屏幕截图中所见，这是我的数据

{
   "result":"https://www.google.it",
   "error":null,
   "errorCode":null,
   "isSuccessful":true,
   "operationStatusCode":"OK"
}

如何在我的视图中的外部 link 中显示以下 result link 示例 https://www.gooole.it？

我必须使用状态吗？

我需要一个示例，说明如何在此处编写代码来执行此操作

<a target="_blank" href={result}>Google Link</a>

Answer 1

您必须在组件中使用状态：

const [url,setUrl] = useState('');

并渲染它：

<a target="_blank" href={url}>Google Link</a>

并且在使用效果中：

useEffect(() => {
   getUrl()
     .then(x => x.json())
     .then(x => {
        const { result } = x;
        // use set url hook 
        setUrl(result);
      });
  });

Answer 2

Do I have to use states?

是的！您应该使用状态对象来维护新结果，因为 setState 可以是异步的，并且当您更新状态时会发生重新渲染并且 UI 得到更新。检查这个：

把这个初始化状态：

const [result, setResult] = useState({});

其中 result 是一个属性并且 setResult 将是更新程序方法。

现在您必须在组件的模板中使用它，例如：

{ result && <a target="_blank" href={result}>Google Link</a> }
{/* if result (its a promise) is not available when render happens then it might err. */}

现在在您的 useEffect 中：

useEffect(() => {
    getUrl()
      .then(x => x.json())
      .then(x => {
        const { result } = x;
        setResult(result); // <-----------set it here
      });
  },[result]); //<---pass it here it rerenders when state.result changes after first render.

Answer 3

我猜你应该已经分离了包含所有 API 个调用的文件：

// apiList.js

export const getUrl = (url, params) => axios.get(url, params).then(res => res.data);

etc

然后在你的函数组件上：

import React, { useEffect, useState } from 'react';
import { getUrl } from '[pathTo]/apiList';

const YourComponent = () => {
  const [state, setState] = useState({});
  useEffect(async () => {
    const result = await getUrl() || {};
    setState(result);
  }, []);


  return (
    <a target="_blank" href={state.result}>Google Link</a>
  );
};

在 useEffect 上调用发生并且 setState 函数更改组件的状态并且将发生重新渲染。然后您会看到 a 标签的 href 属性有了一个新值。

Answer 4

还有一件事我想建议在 useEffect 中进行 API 调用不是一个好的做法。 React 文档还说要避免在 useEffect 中调用 API。相反，创建一个函数来进行所需的 API 调用并在 useEffect 中调用该函数。

const getUrl = () =>{
    /*make your API call here*/
}

useEffect(()=>{
    getUrl()
}

Answer 5

有多种方法可以做到这一点

First Usecase - will use useState

const [url,setUrl] = useState(''); //set useState

useEffect(() => {  //useEffect to get data on componentDidMount ans assign it to url
   getUrl()
     .then(x => x.json())
     .then(x => {
        const { result } = x;           
        setUrl(result); // placing data in useState
      });
  },[])

<a target="_blank" href={url}>Google Link</a>

Second Usecase - Declare one variable in your component and assign the response from api call to variable and used that

let url = ''
useEffect(() => {  //useEffect to get data on componentDidMount ans assign it to url
   getUrl()
     .then(x => x.json())
     .then(x => {
        url = x.result; //Assigning the result to url
      });
  },[])

<a target="_blank" href={url}>Google Link</a>

UseEffect - 使用状态创建外部 Link

UseEffect - Use state to create an external Link

javascript

reactjs

react-hooks

use-effect