Map data using useRef Hook

Question

I am following this: Merge two JSON data into one with particular key values

Now, I added an useEffect() hook. How can I make use of useRef to store my result? This is an asynchronous function.

const App = (props) =>{
    let result = useRef ()
    useEffect(()=>{
      return()=>
        (result.current = [courtdata, balldata].reduce((p, q) => p.map((c, i) => Object.assign({}, 
        {[c.court_id] : q[i].color}))))
      }.[someTrigger])
   return(
        <ul>
           {result.current.map(r => (
           <li>
             Court id - {r.court_id} | Ball colour - {r.color}
           </li>
      ))}
    </ul>
)
}

Now my {r.court_id} and {r.color} are empty.

Things I have tried:

const App = (props) =>{
       [result, setResult] = useState({})
        useEffect(()=>{
          setResult([courtdata, balldata].reduce((p, q) => p.map((c, i) => Object.assign({}, 
            {[c.court_id] : q[i].color}))))
          }))
       return(
            <ul>
               {result.map(r => (
               <li>
                 Court id - {r.court_id} | Ball colour - {r.color}
               </li>
          ))}
        </ul>
)
}

error: TypeError: result.map is not a function

harish kumar · Accepted Answer · 2020-06-19 05:09:42Z

1

As per your render statement, resolve data like below

If you choose useState option

 useEffect(() => {
    const final = [courtdata, balldata].reduce((p, q) => p.map((c, i) => Object.assign({}, c, {color: q[i].color})));
    setResult(final);
  }, []);

Example https://codesandbox.io/s/react-hooks-usestate-shz9v

edited Jun 19, 2020 at 5:09

answered Jun 17, 2020 at 7:43

harish kumar

1,7591 gold badge11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

jason1234 Over a year ago

why is it that when i removed useEffect, i will have an error that states Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.?

jason1234 Over a year ago

hey, there is an issue here. the the const final statement is always re-rendering and it's causing my application to hang

harish kumar Over a year ago

Updated Answer.. Now it will render once only

harish kumar Over a year ago

It will render only once just like ComponentDidMount

jason1234 Over a year ago

why does removing that works? i thought the property of useEffect() is if something changes, it will re-render. but why does it keep re-rendering even when there are no changes? And how do the application know when to re-render since it has been removed?

|

Eason · Accepted Answer · 2020-06-17 02:10:44Z

0

useEffect hook execute after component mounted, and useRef is to access some dom component.

I think what you need is useState.

const [result, setResult] = useState({});

answered Jun 17, 2020 at 2:10

Eason

5285 silver badges17 bronze badges

4 Comments

jason1234 Over a year ago

I have tried that and it seems that I have an error. I have edited my question

Eason Over a year ago

result.map suppose the result is an array, you need to do const [result, setResult] = useState([]);, useEffect will execute later then the component mount

jason1234 Over a year ago

i do not have error anymore, but my output is still null. Probably because the result inside my useEffect() isn't captured

Eason Over a year ago

Try to use react devtool to see if the state has been updated.

Collectives™ on Stack Overflow

Map data using useRef Hook

2 Answers 2

7 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related