React中含if语句的useEffect失效及空值访问报错问题

报错原因分析 #

1. 初始状态空值访问：组件初始化时parent状态为null，直接访问parent.children会触发Cannot read properties of null (reading 'children')错误。无论把if语句放在getParent()前后都无效——因为getParent()是异步操作，setParent不会立刻更新parent状态，执行if判断时parent仍为初始的null。
2. DOM操作不符合React范式：直接用document.getElementById('packageStatus').innerHTML修改DOM是错误的做法，React的DOM更新由状态驱动，手动操作DOM会和React的渲染逻辑冲突，且可能在组件未完成渲染时找不到目标元素，导致后续报错。

正确解决方案：使用条件渲染替代DOM操作 #

React中应通过状态判断来控制渲染内容，而非手动修改DOM。我们可以在渲染packageStatus的位置直接添加条件判断，当package为空字符串时显示指定文本：

修改后的组件核心代码如下：

import { Link } from 'react-router-dom';
import { useEffect, useState } from 'react';
import '../style/Welcome.css';
import Navbar from './Navbar';
import '../style/Button.css';

const Welcome = () => {
  const [parent, setParent] = useState(null);

  useEffect(() => {
    const getParent = async () => {
      const response = await fetch('http://localhost:3001/parents/0');
      const data = await response.json();
      setParent(data);
    };
    getParent();
  }, []);

  return (
    <div className='flex flex-col bg-white h-full bg-opacity-80'>
      <Navbar />
      <div className='mt-8 space-y-8'>
        <div className='text-black text-4xl font-bold'>
          {parent && <h1>Välkommen {parent.name}!</h1>}
        </div>
        <div className='bg-white mx-8 shadow-lg py-4 rounded-lg'>
          {parent && parent.children && parent.children.length > 0 && (
            <div className='space-y-4 text-xl'>
              <div>
                <p>
                  Du har{' '}
                  <span className='font-bold'>{parent.children.length}</span>{' '}
                  barn registrerat
                </p>
                <p>
                  som är{' '}
                  <span className='font-bold'>{parent.children[0].age}</span>{' '}
                  gammalt.
                </p>
                <p>
                  och har{' '}
                  <span id='packageStatus' className='font-bold'>
                    {/* 空值时显示指定文本 */}
                    {parent.children[0].package || 'inget klädpaket ännu'}
                  </span>
                  .
                </p>
              </div>
              <div>
                <p>Din registrerade adress är:</p>
                <p>{parent.adress}</p>
              </div>
              <p className='text-orange-300 underline'>
                Stämmer inte dina uppgifter?
              </p>
            </div>
          )}
        </div>
      </div>
      <div className='mt-auto p-4'>
        <button className='bg-orange-400 text-2xl rounded-lg px-16 py-2'>
          <Link to='/Select'>GÅ VIDARE</Link>
        </button>
      </div>
    </div>
  );
};

export default Welcome;

关键优化点 #

• 增强空值检查：在渲染子元素前，增加parent.children && parent.children.length > 0的判断，避免因children为空或未定义导致的报错。
• 条件渲染文本：利用||逻辑运算符，当parent.children[0].package为空字符串时，自动显示inget klädpaket ännu——空字符串在JavaScript中属于假值，会触发||后的备选内容。
• 移除DOM操作代码：完全遵循React的状态驱动渲染逻辑，避免手动操作DOM带来的潜在问题。

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