React函数组件useEffect使用this.state未定义报错解决方案

报错Cannot read properties of undefined (reading 'state')是因为你混淆了类组件和函数组件的写法：函数组件不存在实例this对象，类组件里的this.state、this.setState写法不能直接在函数组件里使用。

你现有代码的具体问题：

• 函数组件没有内置的state挂载对象，状态管理需要使用useState Hook实现
• 代码里的this.setState()既没有正确的执行上下文，也没有传入要更新的状态值，无法触发视图更新
• Firebase实时数据监听没有做卸载清理，会造成内存泄漏
• 列表渲染时取值路径错误，且没有给列表项加必填的key属性

import React, { useEffect, useState } 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() {
  // 声明存储数据的状态，初始值为空数组避免首次渲染map报错
  const [recordList, setRecordList] = useState([]);

  useEffect(()=>{
    const dbRef=ref(db,"1rh1Ta-8dqZKmh1xy5ans2lOqReoiVAT81WyDKqRaxl0/Nifty");
    // 绑定数据监听，拿到卸载方法
    const unsubscribe = onValue(dbRef,(snapshot)=>{
      let records=[];
      snapshot.forEach(childSnapshot=>{
        let keyName=childSnapshot.key;
        let data=childSnapshot.val();
        records.push({"key":keyName,"data":data})
      });
      // 更新状态触发视图重渲染
      setRecordList(records);
    })
    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  },[]); 
  
  
  return(
    <div>
      {recordList.map((row)=>{
        return(
          <Box component="span" sx={{}} key={row.key}>
            <Grid>{row.data.Close}</Grid>
          </Box>
        )
      })}
    </div>
  )
}

• 引入useState Hook声明状态和对应的更新方法，完全替代类组件的this.state/this.setState能力
• 移除所有this相关的类组件写法，Firebase数据拉取完成后直接调用状态更新方法，把数据存入状态即可自动触发视图更新
• 补充useEffect的返回清理函数，组件卸载时自动取消Firebase的实时监听
• 修正取值路径：你存入records的每条数据结构是{key: 键名, data: 接口返回值}，Close字段在data对象下，需要通过row.data.Close取值
• 给列表渲染的外层组件加上唯一key属性，符合React渲染规范，避免控制台警告

内容的提问来源于stack exchange，提问作者user460567