使用 useRef Hook 映射数据

Question

我遵循这个：将两个 JSON 数据合并为一个具有特定键值的数据

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

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} 是空的。

我尝试过的事情：

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 is not a function

Answer 1

根据您的 render 语句，解析如下数据

如果选择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

Answer 2

useEffect钩子在组件挂载后执行，useRef是访问某个 dom 组件。

我认为你需要的是useState.

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