Как я могу вернуть только установленное состояние из полученных json данных? - PullRequest
Новая
       25

Как я могу вернуть только установленное состояние из полученных json данных?

1 голос
/ 25 января 2020

я использую эти API для получения json данных. 

const FetchEarthquakeData = url => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(jsonData => setData(jsonData.features))
  }, [url]);

  return data;
};

Проблема в том, что когда я использую эту функцию следующим образом: 

const jsonData = FetchEarthquakeData(url)
console.log(jsonData);

Я получаю следующие console.logs: 

null
Array(17)

Итак, моя функция FetchEarthquakeData возвращает нулевая переменная и! желаемый API. Однако, если я хочу отобразить () на jsonData, нулевое значение будет отображено. Как я могу изменить свой код, чтобы получить только массив?

Ответы [ 3 ]

0 голосов
/ 25 января 2020

в соответствии с документацией о перехватах реагирования, только перехватчики вызовов из функций реагирования Не вызывать перехватчики из обычных функций JavaScript. Компоненты React Function - в основном это просто JavaScript Функции, являющиеся компонентами React, которые возвращают JSX (синтаксис React) для вашего требования. В вашем компоненте реагирования вы можете сделать следующее. Идея состоит в том, чтобы инициализировать обработчик состояния пустым массивом, а затем обновлять его, как только json доступны данные. логи извлечения c можно перемещать внутри useeffect. 

const SampleComponent=()=>{
const [data,setData] = useState([])
useeffect (){
fetch(url).then((responsedata)=>setData(responseData) ,err=>console.log (err)
}

return (
<>
{
data.map((value,index)=>
<div key=index>{value}<div>
}
</>
)
}

, если вы обнаружите, что шаблон извлечения повторяется в вашем приложении, вы можете использовать для этого пользовательский хук. 

const useFetch = (url, options) => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);
  return { response, error };
};

в вашем компоненте React вы можете использовать как 

const {data,error} = useFetch(url , options)
0 голосов
/ 25 января 2020

Вы должны сделать это в асинхронном режиме c, чтобы достичь того, что вам нужно. Я рекомендую вам делать это отдельно. В случае, если вам нужны данные для загрузки, когда компонент монтируется.

Другое дело, что ваша функция немного сбивает с толку. Давайте предположим некоторые вещи: 

const Example = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(url);

      setData(result.features);
    };

    fetchData();
  }, []);

  return (
    <div>
      {console.log(data)}
      {data && <p>{JSON.stringify(data, null, 2)}</p>}
    </div>
  );
};

Я уверен, что то, как вы делаете это, правильно хранит данные на data, но вы не можете увидеть это в своем console.log. Это немного сложно. Вы можете прочитать немного больше здесь => https://medium.com/@wereHamster / beware-реакции-setstate-is-asynchronous-ce87ef1a9cf3

Добавление немного больше сложности, если вы хотите обрабатывать различные состояния как загрузка и ошибка. 

const Example = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsError(false);
      setIsLoading(true);

      try {
        const result = await fetch(url);
        setData(result.features);
      } catch (error) {
        setIsError(true);
      }

      setIsLoading(false);
    };

    fetchData();
  }, []);

  return (
    <div>
      {console.log(data)}
      {data && <p>{JSON.stringify(data, null, 2)}</p>}
    </div>
  );
};
0 голосов
/ 25 января 2020

Я не совсем уверен, что делают useState() и setData(). Но для того, чтобы получить данные json из API, вы можете сделать функцию следующим образом, а затем выполнить операции с выбранными данными. 

const url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson"

const FetchEarthquakeData = url => {
  return new Promise(resolve => {
    fetch(url)
      .then(res => res.json())
      .then(jsonData => resolve(jsonData.features))
  })
}

FetchEarthquakeData(url).then(features => {
  console.log(features)
  // Do your map() here
})
...