React中元素创建后立即调用getElementById失效问题求助

别用原生DOM硬刚，用React数据驱动才是正道 #

React是数据驱动视图的框架，直接用document.getElementById操作DOM很容易踩异步渲染的坑，推荐用状态管理来实现需求：

import { useState } from 'react';

function YourComponent() {
  const [items, setItems] = useState([]);
  // 用state存每个元素的图片地址，key对应div的id
  const [itemImgs, setItemImgs] = useState({});

  // 点击按钮生成元素的函数
  const renderItems = () => {
    // 模拟要遍历的数组
    const newItems = [{ id: '1', name: '第一个元素' }, { id: '2', name: '第二个元素' }];
    setItems(newItems);
    // 直接给目标元素设置图片地址，React会自动渲染
    setItemImgs(prev => ({ ...prev, '1': '/path/to/your/image.jpg' }));
  };

  return (
    <div>
      <button onClick={renderItems}>生成元素</button>
      {items.map(item => (
        <div 
          key={item.id} 
          id={item.id}
          {/* 根据状态动态设置背景色 */}
          style={{ backgroundColor: itemImgs[item.id] ? 'red' : 'white' }}
        >
          {/* 状态存在就渲染图片 */}
          {itemImgs[item.id] && <img src={itemImgs[item.id]} alt={item.name} />}
          {item.name}
        </div>
      ))}
    </div>
  );
}

非要操作DOM？用useEffect监听渲染完成 #

如果因为特殊情况必须操作DOM，就用useEffect监听数组的变化，等React完成渲染、元素已经挂载到DOM上后再执行操作：

import { useState, useEffect } from 'react';

function YourComponent() {
  const [items, setItems] = useState([]);

  const renderItems = () => {
    const newItems = [{ id: '1', name: '第一个元素' }, { id: '2', name: '第二个元素' }];
    setItems(newItems);
  };

  // 监听items数组变化，渲染完成后执行DOM操作
  useEffect(() => {
    // 数组有内容时才执行
    if (items.length === 0) return;
    
    const targetDiv = document.getElementById('1');
    if (targetDiv) {
      targetDiv.style.backgroundColor = 'red';
      // 创建并插入图片
      const img = document.createElement('img');
      img.src = '/path/to/your/image.jpg';
      img.alt = '元素图片';
      targetDiv.appendChild(img);
    }
  }, [items]); // 依赖items，数组更新时触发

  return (
    <div>
      <button onClick={renderItems}>生成元素</button>
      {items.map(item => (
        <div key={item.id} id={item.id}>
          {item.name}
        </div>
      ))}
    </div>
  );
}

为啥之前的写法会踩坑？ #

React的状态更新是异步的，你点击按钮调用setItems后，组件不会立刻渲染，此时执行document.getElementById根本找不到元素。第二次点击时，第一次渲染已经完成，元素存在了，所以能生效。

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