React数组最后一个元素图片渲染缓慢问题求助

将图片路径存储在长度为5的数组中，点击前几个按钮时图片可立即渲染，但点击最后一个按钮时图片渲染极慢甚至无法显示。状态存储在父组件中，尝试使用长度为6的数组时，索引4的图片渲染正常，最后一个索引的图片依旧渲染缓慢或不显示。

相关代码 #

const Option2DropDown = () => {
  useEffect(() => {
    if (choices.length === 0) {
      for (let i = 0; i < 5; i++) {
        choices.push(null);
      }
    }
  }, [choices]);

  return (
    <Row>
      {choices.map((abox, idx) => {
        return (
          <OptionDropDown
            key={idx.toString()}
            id={idx.toString()}
            img={cards[idx]}
          />
        );
      })}
    </Row>
  );
};

const OptionDropDown = (props) => {
      return (
      <Col >
        <DropdownButton
          onMouseOver={(e) => handleChoiceButton(e, props.id)}
          title={
            <img
              width={80}
              height={80}
              src={props.img}
              className="selectHandBtn"
            />
          }
          disabled={choiceConfirmed}
          drop="end"
        >
              <Dropdown.Item id={Hands.rock} className="selectHandBtn" as="button" onClick={selectHand}>
                  <img id={Hands.rock} width={80} height={80} src={rock} />
              </Dropdown.Item>
              <Dropdown.Item id={Hands.paper} className="selectHandBtn" as="button" onClick={selectHand}>
                  <img id={Hands.paper} width={80} height={80} src={paper} />
              </Dropdown.Item>
              <Dropdown.Item id={Hands.paper} className="selectHandBtn" as="button" onClick={selectHand}>
                  <img  id={Hands.scissor} width={80} height={80} src={scissor}/>
              </Dropdown.Item>
        </DropdownButton>
      </Col>
    );
};

1. 直接修改状态数组导致更新异常 #

你在useEffect里用choices.push(null)直接修改数组，这属于直接变更状态，React无法检测到数组的引用变化，会导致部分元素的状态更新不及时，尤其是最后一个元素。React要求状态更新必须通过set方法触发重新渲染。

解决方式：如果choices是父组件传递的状态，调用父组件提供的setChoices初始化数组：

// 假设父组件传递了setChoices方法
useEffect(() => {
  if (choices.length === 0) {
    setChoices(new Array(5).fill(null));
  }
}, [choices, setChoices]);

2. 索引作为key引发的组件复用问题 #

用数组索引idx.toString()作为组件key，当数组内容变化时，React可能会复用之前的组件实例，导致最后一个元素的渲染逻辑异常。

解决方式：给每个选项分配唯一标识（比如UUID、或图片绑定的唯一ID）作为key：

// 假设cards数组每个元素带有唯一id属性
{choices.map((abox, idx) => {
  return (
    <OptionDropDown
      key={cards[idx].id} // 用唯一标识替代索引
      id={idx.toString()}
      img={cards[idx]}
    />
  );
})}

3. 图片未预加载导致延迟 #

最后一个图片渲染慢可能是因为点击时才开始请求资源，没有提前预加载。

解决方式：在组件初始化时预加载所有需要的图片：

useEffect(() => {
  // 预加载所有用到的图片资源
  const imageSources = [rock, paper, scissor, ...cards];
  imageSources.forEach(src => {
    const img = new Image();
    img.src = src;
  });
}, []);

4. DOM元素ID冲突 #

第三个Dropdown.Item的id写成了Hands.paper，和第二个元素重复，会引发DOM ID冲突，导致异常行为。

解决方式：修正重复的ID：

<Dropdown.Item id={Hands.scissor} className="selectHandBtn" as="button" onClick={selectHand}>
  <img id={Hands.scissor} width={80} height={80} src={scissor}/>
</Dropdown.Item>

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