本文介绍了使用 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 映射数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!