将Strapi Datas扑来

Question

*读了许多文档后，我看到扑飞与strapi v4不兼容，要将其与颤动一起使用，您必须使用一个 v4下的Strapi项目。

正在尝试将我的Flutter应用程序连接到Strapi。

我跟随官方的Strapi Tuto进行扑打，并在YouTube上进行了一些视频，但我坚持阅读Datas。

当我的观点开始时，我有一个错误：

_ typeerror（类型'_internallinkedhashmap＆lt; string，dynamic＆gt;'不是类型'iToble'的子类型）

我的完整代码。

import 'dart:convert';
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:strapitests/user.dart';

class MyList extends StatefulWidget {
  const MyList({Key? key}) : super(key: key);

  @override
  State<MyList> createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  List<User> users = [];

  Future getAll() async {
    var data = await http.get(Uri.parse("http://10.0.2.2:1337/api/apis"));
    var jsonData = json.decode(data.body);

    for (var u in jsonData) {
      users.add(
        u['name'],
      );
    }
    return users;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
        future: getAll(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.data == null) {
            return Container(
              child: const Center(
                child: Text("Loading..."),
              ),
            );
          } else {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text(snapshot.data[index].name),
                  subtitle: Text(snapshot.data[index].email),
                );
              },
            );
          }
        },
      ),
    );
  }
}

这是 “用户”课：

class User {
  String name;
  String email;
  String password;
  User(this.name, this.email, this.password);
}

当我在浏览器上进行“获取”时，结果是：

"data": [
{
"id": 1,
"attributes": {
"name": "john",
"password": "dfdf",
"email": "[email protected]",
"createdAt": "2022-05-23T20:38:27.725Z",
"updatedAt": "2022-05-23T20:38:28.466Z",
"publishedAt": "2022-05-23T20:38:28.464Z"
}
},
{
"id": 2,
"attributes": {
"name": "text",
"password": "mp",
"email": "mail",
"createdAt": "2022-05-23T20:47:56.717Z",
"updatedAt": "2022-05-23T20:47:56.717Z",
"publishedAt": "2022-05-23T20:47:56.712Z"
}
},
{
"id": 3,
"attributes": {
"name": "name",
"password": "mp",
"email": "mail",
"createdAt": "2022-05-23T20:52:07.911Z",
"updatedAt": "2022-05-23T20:52:07.911Z",
"publishedAt": "2022-05-23T20:52:07.910Z"
}
}
],

感谢您的帮助！

Answer 1

首先，您需要从JSON解码您的用户。由于这是一个简单的类，因此您只需为 user class fromjson 构造函数编写快速类：

class User {
  String name;
  String email;
  String password;
  User(this.name, this.email, this.password);

  factory User.fromJson(Map<String, dynamic> json) {
    final attributes = json['attributes'];
    return User(
      attributes['name'],
      attributes['email'],
      attributes['password'],
    );
  }
}

接下来，您收到的数据是映射，无法迭代通过前循环。

取而代之的是，迭代以为单位的列表“数据” ，并用 user.fromjson 构造函数对每个元素进行解码：

Future<List<User>> getAll() async {
  var data = await http.get(Uri.parse("http://10.0.2.2:1337/api/apis"));
  var jsonData = json.decode(data.body);

  final users = jsonData['data'];

  return users.map((userJson) => User.fromJson(userJson)).toList();
}

最后，因为您使用的是 FutureBuilder ，您实际上不需要它是一个状态的小部件，也不需要将用户作为类属性存储。您可以简单地使用快照中返回的列表 - 尽管您需要更改代码，以使未来是最终成员，以便小部件不会在每个构建上构造新的未来：

class MyList extends StatelessWidget {
  late final Future<List<User>> users = getAll();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
        future: users,
        // ...
      ),
    );
  }
}

---

此外 -就您的问题而言，但是最好研究避免在服务器上存储密码的方法。如果您确实存储密码，请绝对避免在生产应用程序的任何API响应中返回它们:)。

以下是有关该主题的几篇好文章：

https：https：https：https：https： //auth0.com/blog/hashing-passwords-one-way-way-to-to-security/

https://auth0.com/blog/adding-salt-salt-salt-to-hashing-a-better-a-better-way-way-way-way-to-store-passwords/ < /a>