Как использовать глобальную переменную в React js?

#javascript #reactjs

Вопрос:

 import React, {useEffect, useState } from 'react';
import axios from 'axios';

function Weather(){

useEffect(()=>{
    const apiCall= async ()=>{
        var appid="";
        const resp=await axios.get(`http://api.openweathermap.org/data/2.5/weather?q=seoulamp;appid=${appid}`);
        console.log(resp.data);

        var temp=String((resp.data.main.temp-273)).substring(0,4);
    };
    apiCall();
},[]);

return(
    <div>
        <div className="displayTime">{temp}</div>
    </div>
);
}
export default Weather;

Я хочу использовать переменную с именем temp в функции возврата. Но я не уверен, как объявлять глобальные переменные в React.
Я был бы искренне благодарен за любую помощь.

1. вы пробовали использовать state ? const [temp,setTemp] = useState(<initial value>)

2. использовать [var] нехорошо, это вызовет проблемы с безопасностью или некоторые конфликты. Используйте context или localStorage для постоянных данных. попробуйте, как сказал @HarmandeepSinghKalsi, используя state, это лучше для этого случая

Ответ №1:

Объявите temp как переменную состояния, и вы можете использовать ее в качестве метода возврата.

 import React, {useEffect, useState } from 'react';
import axios from 'axios';

function Weather(){

const [temp,setTemp] = useState("");
useEffect(()=>{
    const apiCall= async ()=>{
        var appid="";
        const resp=await axios.get(`http://api.openweathermap.org/data/2.5/weather?q=seoulamp;appid=${appid}`);
        console.log(resp.data);

        setTemp(String((resp.data.main.temp-273)).substring(0,4));
    };
    apiCall();
},[]);

return(
    <div>
        <div className="displayTime">{temp}</div>
    </div>
);
}
export default Weather;

1. Я исправил это нормально благодаря вам! большое вам спасибо!!!

2. Рад это знать. Если бы это помогло, я надеюсь, вы не возражали бы проголосовать и принять ответ для лучшей наглядности ответа . Приятного обучения

Ответ №2:

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

 import {temp} from './myglobals'