如何访问全局 scope 中的 reactjs usestate 值？

Question

I have the following reactJS code -

useEffect(()=>{
    const getinterviewerDetails= async ()=>{
      const data1 = await axios.get("http://localhost:8083/api/GetProduct")
      .then(response => {
        console.log("role is "+response.data[0].role)
        setinterviewerDetails(response.data)
        var cars = response.data,
        result = cars.reduce(function (r, a) {
            r[a.role] = r[a.role] || [];
            r[a.role].push(a);
            return r;
        }, Object.create(null));
        console.log("result is : ",result);
        console.log(interviewerDetails)
    })
    .catch(error => { console.log(error) })
    setinterviewerDetails(data1);
    };  
  getinterviewerDetails();
  },[])

From which I need to get the result value in the global scope, out of a useEffect function. I tried doing so just by declaring the variable from outside of the function scope and then initializing it from with useEffect scope. But, it was giving value as undefined. How can I get it done? I just need to access result value from global scope.

Answer 1

I think one way is to create context ( https://en.reactjs.org/docs/hooks-reference.html#usecontext ) and put your variable inside of it.

Other way is to declare your variable by useState in parent component and pass setState function to child component

Answer 2

One way is to populate the window object. That is, to add result as a property to the window object. Since window is global, you will probably get the desired output.

window.result = result;

And then you could use it wherever you want, although I don't think there is an need to do this in React. You should try to use states and contexts rather than doing this while using React. Otherwise as @Lah Ezcen commented, you could also try using local storage.