使用 useRef Hook 映射数据 [英] Map data using useRef Hook

问题描述

我正在关注这个:合并两个 JSON 数据与特定键值合二为一

现在，我添加了一个 useEffect() 钩子.如何使用 useRef 来存储我的结果?这是一个异步函数.

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>
)
}

现在我的 {r.court_id} 和 {r.color} 是空的.

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

我尝试过的事情:

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>
)
}

错误:TypeError: result.map 不是函数

推荐答案

根据你的渲染语句，解析如下数据

As per your render statement, resolve data like below

如果你选择useState选项

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

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

这篇关于使用 useRef Hook 映射数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！