在不使用自动获取数据的情况下,你可以通过手动从数据库或其他数据源获取数据,并将其存储在一个列表中,然后将该列表作为数据源传递给列表组件。下面是一个使用列表组件的示例代码:
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    // 从数据库或其他数据源获取数据
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, []);
  return (
    
      {data.map(item => (
        - {item.name}
 
      ))}
    
  );
};
export default MyComponent;
在上面的代码中,我们使用了React的useState和useEffect hooks来管理组件的状态和副作用。在useEffect中,我们定义了一个异步函数fetchData,它使用fetch方法从API中获取数据,并将其转换为JSON格式。然后,我们使用setData函数将数据存储在data状态变量中。在组件的返回部分,我们通过map方法遍历data数组,并使用每个项的id和name属性创建li元素。最后,我们将这些li元素渲染在一个ul元素中。
请注意,上述代码中的数据获取部分是异步的,因此在渲染组件时,data可能为空数组。你可以使用条件渲染来处理这种情况,例如显示一个加载中的状态或占位符。