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

Question

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

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

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

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

如何显示以下结果链接示例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);
      });
  });