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

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"
}

如何在我的视图中在外部链接中显示以下result链接示例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);
      });
  });