UseEffect - 使用状态创建外部链接答案

【问题标题】：UseEffect - Use state to create an external LinkUseEffect - 使用状态创建外部链接
【发布时间】：2020-06-08 01:58:43
【问题描述】：

我有一个方法 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"
}

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

我必须使用状态吗？

我需要一个示例来说明如何在此处编写代码

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

【问题讨论】：

你能准确解释你想要什么吗，我一遍又一遍地阅读你的问题。但是我不是很明白，点击锚点后是否需要调用getUrl()函数？
我认为您需要将结果存储在状态中。

标签： javascript reactjs react-hooks use-effect

【解决方案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);
      });
  });

【讨论】：

我建议在effect 中添加一个空数组[] 以避免在每次渲染时调用api。也许他错过了。

【解决方案2】：

我必须使用状态吗？

是的！您应该使用状态对象来维护最新结果，因为 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.

【讨论】：

【解决方案3】：

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

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

useEffect(()=>{
    getUrl()
}

【讨论】：

【解决方案4】：

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

第一个用例 - 将使用 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>

第二个用例 - 在你的组件中声明一个变量，并将 api 调用的响应分配给变量并使用它

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>

【讨论】：

【解决方案5】：

我猜你应该有一个包含所有 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 属性有一个新值。

【讨论】：