React动态添加Kendo-React组件未渲染问题求助

问题出在你用普通变量componentList管理组件列表——React无法感知普通变量的变化，所以Ajax请求后添加的组件不会触发重渲染。你不需要手动调用.render()，改用React的状态管理就能解决：

1. 用useState替代普通数组：把组件列表改成React状态，这样状态变化时React会自动触发重渲染
2. 通过状态更新函数修改列表：不能直接用push修改原数组，要创建新数组并通过setComponentList更新状态

修改后的完整代码：

const SourceTab = (SourceTabProps) => {
  // 用useState初始化状态，默认包含一个PersonDD组件
  const [componentList, setComponentList] = React.useState([<PersonDD/>]);

  async function getStrata(){
    var url = '/access/.im.read';
    const res = await axios.get(url);
    console.log(res.data.item);
    // 用扩展运算符创建新数组，添加新组件后更新状态
    setComponentList(prevList => [...prevList, <PersonDD/>, <PersonDD/>]);
  }

  React.useEffect(() =>{
    getStrata();
  },[]);

  return (
    <>
      <Title title="People" />
      <div className='assignment_div_css'>
        {componentList}
      </div>
    </>
  );
};

关键说明 #

• React是状态驱动渲染的，只有状态（或props）发生变化时，组件才会重新渲染
• 状态更新必须通过setState系列函数（这里是setComponentList），直接修改原数组不会触发重渲染
• 使用prevList => [...prevList, ...]的写法是为了确保基于最新的状态更新，避免异步更新导致的问题

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