UseEffect - использовать состояние для создания внешней ссылки. - PullRequest
Новая
       79

UseEffect - использовать состояние для создания внешней ссылки.

7 голосов
/ 24 февраля 2020

У меня есть метод 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>

enter image description here

Ответы [ 5 ]

5 голосов
/ 24 февраля 2020

Вы должны использовать состояние в вашем компоненте: 

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);
      });
  });
1 голос
/ 25 февраля 2020

Есть несколько способов сделать это

Первый вариант использования - будет использовать 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>
1 голос
/ 24 февраля 2020

Еще одна вещь, которую я хотел бы предложить, что выполнение вызовов API в useEffect не является хорошей практикой. В документации React также сказано, чтобы избежать вызовов API в useEffect. Вместо этого создайте функцию, которая будет выполнять необходимый вызов API, и вызовите эту функцию в useEffect. 

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

useEffect(()=>{
    getUrl()
}
1 голос
/ 24 февраля 2020

Должен ли я использовать состояния?

Да! Вы должны использовать объект состояния для сохранения результатов fre sh, так как setState может быть asyn c, и когда вы обновляете состояние, происходит повторное рендеринг и обновляется пользовательский интерфейс. Проверьте это:

Установите это, чтобы инициализировать состояние: 

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.
0 голосов
/ 24 февраля 2020

Полагаю, вы должны иметь отдельный файл, содержащий все вызовы 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 вызов происходит и * Функция 1008 * меняет состояние компонента и произойдет повторный рендеринг. тогда вы увидите, что у вашего тега a есть новое значение для атрибута href.

...