在不使用自动获取数据的情况下,你可以通过手动从数据库或其他数据源获取数据,并将其存储在一个列表中,然后将该列表作为数据源传递给列表组件。下面是一个使用列表组件的示例代码:
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
可能为空数组。你可以使用条件渲染来处理这种情况,例如显示一个加载中的状态或占位符。