调用接口渲染React列表时出现.map is not a function错误求助

核心错误点 #

• 异步操作未等待完成：response.json()是异步方法，必须添加await，否则解构得到的users是Promise对象而非数组，导致map调用失败。
• 误用状态更新函数：渲染列表时调用了setUsers.map，但setUsers是更新状态的函数，不是数组，应该使用状态变量users来遍历。

修正后的完整代码 #

const DisplayTable = () => {
    const [users, setUsers] = useState([]);
    const [search, setSearch] = useState('');

    useEffect(() => {
        obtenerDatos();
    }, []);

    const obtenerDatos = async () => {
        try {
            const response = await fetch("https://dummyjson.com/users");
            const { users } = await response.json();
            setUsers(users);
        } catch (error) {
            console.error('获取用户数据失败:', error);
        }
    };

    return (
        <div className="row">
            <ul>
                {users.map((item) => (
                    <li key={item.id}> {item.firstName}</li>
                ))}
            </ul>
        </div>
    );
};

额外优化建议 #

• 给search状态设置初始空字符串，避免后续使用时出现undefined问题。
• 增加try/catch捕获请求异常，便于调试和处理网络错误。
• 移除未使用的组件参数id和firstName，减少冗余代码。

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