如何在函数中正确使用useEffect ?

Question

我不认为我在我写的函数中正确使用useEffect。如果我对类做同样的事情，那就没有问题了，我可以做ComponentDidMount()。但我不太了解胡克斯。所以我认为我将错误的地方。

//import { onValue } from 'firebase/database';
import React, { useEffect } from "react";
import {db} from '../../firebase';
import {ref,onValue} from 'firebase/database'
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
export default function NiftyChart() {
React.useEffect(()=>{
const dbRef=ref(db,"1rh1Ta-8dqZKmh1xy5ans2lOqReoiVAT81WyDKqRaxl0/Nifty");
onValue(dbRef,(snapshot)=>{
let records=[];
snapshot.forEach(childSnapshot=>{
let keyName=childSnapshot.key;
let data=childSnapshot.val();
console.log(snapshot.val());
records.push({"key":keyName,"data":data})
console.log(records[records.length-1])
});
this.setState();
})
},[]); 


return(

<div>
{this.state.map((row, index)=>{
return(
<Box component="span" sx={{}}>
<Grid > {row.Close}</Grid>

</Box>
)
})}
</div>
)
}

也不打印row.Close的值。在控制台中，我似乎正在获得无法读取未定义属性(读取"状态")此错误。如有任何帮助，不胜感激。

Answer 1

您需要使用useState:

const [records, setRecords] = useState([]);
useEffect(() => ..get records and set to state, []);

代码应该是这样的:

export default function MyComponent() {
const [records, setRecords] = useState([]);

useEffect(() => {
// ... other code is omitted for the brevity
setRecords(records)
}, [])

return(            
<div>
{records && 
records.map((row, index)=>{ //...other code is omitted 
// for the brevity }
</div>
)
}

钩是什么?钩子是:

钩子是一个特殊的函数，可以让你"钩入"React的特性。例如，useState是一个钩子，它允许你添加React状态到

功能组件

useEffect中的[]表示:

如果您想运行一个效果并只清理一次(在mount和卸载),你可以通过一个空数组([])作为第二个参数。这告诉React你的效果不依赖于props的任何值或状态,所以不需要重新运行。这不是一个特殊的处理Case -它直接遵循依赖数组的方式作品。

阅读更多关于API调用的文章