为何useEffect在首次渲染时未触发？React Hooks问题排查

核心问题定位 #

你在GridCell组件里犯了语法错误：把useEffect写成了赋值语句useEffect = (() => {}, [])，正确的Hook调用方式应该是useEffect(() => {}, [])。这个错误直接导致React无法识别这个副作用函数，自然不会触发它，所以cellValue始终是初始化的空字符串。

其他潜在问题修复 #

除了上述语法错误，还有几个需要调整的点，避免后续出现类似问题：

1. Grid组件的useEffect依赖项缺失 #

Grid组件的useEffect依赖了props.gridData，但当前依赖数组是[]，如果后续后端数据加载完成后props.gridData更新，这个useEffect不会重新执行，导致gridCells状态无法同步更新。需要把props.gridData加入依赖数组：

useEffect(() => {
  if(!props.gridData) {
    createGrid();
  } else {
    setGridCells(props.gridData)
  }
}, [props.gridData]); // 添加依赖项

2. GridCell组件的状态优化与依赖补充 #

GridCell的useEffect依赖props.cellData，如果后续cellData发生变化，空依赖数组会导致组件状态无法同步更新。同时可以优化状态初始化逻辑，减少不必要的副作用执行：

// 直接用props初始化状态，减少useEffect的使用
const [cellValue, setCellValue] = useState(props.cellData?.answer || '');
const [isHint, setIsHint] = useState(props.cellData?.across?.length > 0 || props.cellData?.down?.length > 0);

// 若需要响应cellData的后续变化，保留useEffect并添加依赖
useEffect(() => {
  setCellValue(props.cellData.answer);
  setIsHint(props.cellData.across?.length > 0 || props.cellData.down?.length > 0 );
}, [props.cellData]);

3. 避免不必要的状态维护 #

如果cellValue和isHint不需要本地修改（比如仅展示后端数据），可以直接使用props渲染，省去状态维护的成本：

// 去掉多余状态，直接使用props
return (
  <Button title='title' className={`grid-cell ${(props.cellData.across?.length > 0 || props.cellData.down?.length > 0) ? 'hint' : 'normal'}`} onClick={onCellClick}>
    <div>
      {props.cellData.answer}
    </div>
  </Button>
)

完整修复后的代码示例 #

GridCell组件修复后 #

import Button from "react-bootstrap/Button";
import React, { useEffect, useState } from "react";
import './gridCell.scss';

const GridCell = (props) => {
  const [cellValue, setCellValue] = useState(props.cellData?.answer || '');
  const [isHint, setIsHint] = useState(props.cellData?.across?.length > 0 || props.cellData?.down?.length > 0);

  useEffect(() => {
    setCellValue(props.cellData.answer);
    setIsHint(props.cellData.across?.length > 0 || props.cellData.down?.length > 0 );
  }, [props.cellData]);

  const onCellClick = () => {
    // 后续添加点击逻辑
  }

  return (
    <Button title='title' className={`grid-cell ${isHint ? 'hint' : 'normal'}`} onClick={onCellClick}>
      <div>
        {cellValue}
      </div>
    </Button>
  )
}

export default GridCell;

Grid组件修复后 #

import React, {useEffect, useState } from "react";
import ListGroup from 'react-bootstrap/ListGroup';
import Row from 'react-bootstrap/Row';
import GridCell from '../gridCell/gridCell';
import { blankCell, dummyCell} from "../../models/hint-grid";

const Grid = (props) => {
  const [gridCells, setGridCells] = useState([]);

  useEffect(() => {
    if(!props.gridData) {
      createGrid();
    } else {
      setGridCells(props.gridData)
    }
  }, [props.gridData]);

  const createGrid = () => {
    let newGrid = [];
    for (let i = 0; i < 9; i++){ 
      let cellRow = [];
      for(let j = 0; j< 9; j++) {
        cellRow.push(blankCell);
      }
      newGrid.push(cellRow);
    }
    newGrid[0][0] = dummyCell;
    setGridCells(newGrid);
  }

  return (
    <ListGroup>
      {gridCells.length === 9 ? (
        gridCells.map((gridRow, i) => (
          <Row key={`grid-row-${i}`}> 
            {gridRow.map((gridCell, j) => (
              <GridCell key={`grid-cell-${i}-${j}`} cellData={gridCell}/>
            ))} 
          </Row>
        ))
      ) : (
        <>loading...</>
      )}
    </ListGroup>
  )
}
export default Grid;

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