React Signals异步数据无法渲染问题及相关API疑问

1. 为什么console.log能显示数据但HTML中不展示？ #

核心原因是状态更新没有触发React组件重新渲染：

• React组件的重新渲染依赖自身的状态管理机制，只有当组件的原生状态（useState/useReducer）、props或context发生变化时，才会重新执行组件函数并更新视图。
• 你用的signal和effect不是React原生API，修改list.value后，这个变化没有通知React组件需要重新渲染。组件只会在初始渲染时展示空数组[]，后续数据更新后组件没有重新执行，HTML内容自然不会同步更新。而console.log能看到数据，是因为数据确实被赋值到了list.value上，只是视图没跟进。

2. 该问题是否存在于signal、createSignal、useSignal中？ #

这个问题和API名称无关，关键看这些API是否适配了React的更新机制：

• SolidJS的createSignal：SolidJS是响应式框架，修改signal值会自动触发视图更新，但它的组件渲染逻辑和React完全不同，在React组件里直接用Solid的createSignal必然不生效，因为两者渲染机制不兼容。
• @preact/signals-react的useSignal：这是专门为React设计的信号库，用useSignal创建的信号，在组件中访问signal.value时会自动订阅变化，修改signal.value会触发React组件重新渲染，这种情况不会出现你当前的问题。
• 其他未适配React的signal实现：如果是自定义的或者未集成React更新逻辑的signal，修改value后不会触发React的组件更新（比如调用setState或forceUpdate），就会出现数据更新但视图不刷新的问题。

修复方案 #

方案1：改用React原生状态 #

import { useState, useEffect } from 'react';

export const ManagementUsersList = () => {
  const [list, setList] = useState([]);

  useEffect(() => {
    client()
      .get('/user')
      .then(({ data }) => {
        console.log(data);
        setList(data);
      });
  }, []);

  return (
    <div>
      {JSON.stringify(list)}
    </div>
  );
};

方案2：使用适配React的信号库（如@preact/signals-react） #

import { useSignal, useEffect } from '@preact/signals-react';

export const ManagementUsersList = () => {
  const list = useSignal([]);

  useEffect(() => {
    client()
      .get('/user')
      .then(({ data }) => {
        console.log(data);
        list.value = data;
      });
  }, []);

  return (
    <div>
      {JSON.stringify(list.value)}
    </div>
  );
};

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