React中如何将组件加载到数组并解决组件不渲染问题

• 你声明的components是普通局部变量，不属于React能追踪的响应式状态。useEffect的执行时机是组件完成首次DOM挂载之后，首次渲染执行到return的时候，components还是空数组，页面自然渲染不出内容；后续你在useEffect里修改普通变量，不会触发React的重渲染流程，页面会一直停留在首次渲染的空状态。
• 代码存在笔误：日志方法console被错写为connsole，会触发控制台报错，但不是渲染失败的核心原因。
• 现有写法存在隐患：提前把生成好的JSX元素存入数组的模式，后续如果关联的答案数据、选中状态更新，很容易出现渲染内容和实际状态不同步的问题；同时列表项没有设置必填的key属性，会触发React的列表渲染警告，极端情况下会出现组件状态错乱。

优先推荐直接在渲染阶段生成组件列表，完全不需要额外的普通变量和useEffect逻辑，代码更简洁也符合React的数据流设计：

// 移除原来的普通components变量、对应往数组塞组件的useEffect逻辑，直接在return时遍历生成
return (
  <div>
    {roadsigns.signs_questions.map((question, index) => (
      <RadioButtonRN
        // 优先用题目自带的唯一id代替索引作为key，避免节点复用bug
        key={question.id ?? index}
        data={question.answers}
        box={false}
        textColor={primary}
        initial={2}
        selectedBtn={(e) => selectedAnswer(e)}
      />
    ))}
  </div>
);

如果确实有提前缓存组件列表的需求（比如组件生成逻辑开销极大），需要把components声明为响应式状态，修改时通过状态更新方法触发重渲染，同时补全useEffect的依赖项避免闭包问题：

// 将components声明为可响应的状态
const [components, setComponents] = useState([]);

useEffect(() => {
  const loadedList = roadsigns.signs_questions.map((question, index) => (
    <RadioButtonRN
      key={question.id ?? index}
      data={question.answers}
      box={false}
      textColor={primary}
      initial={2}
      selectedBtn={(e) => selectedAnswer(e)}
    />
  ));
  setComponents(loadedList);
  console.log(loadedList); // 修正之前的拼写错误
  // 补全useEffect依赖项，避免拿到过期的闭包值
}, [roadsigns.signs_questions, primary, selectedAnswer]);

注意：React列表渲染要求每个同层级列表项必须有唯一的key属性，不要偷懒省略，否则切换、更新列表时很容易出现选中状态错位、内容不更新的问题。

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