ListViewにAPIの結果を入力しようとしています。API呼び出しは、共有設定から値を取得した後に実行する必要があります。ただし、実行時にAPI呼び出しの関数は無限ループを実行し、UIはレンダリングされません。私はデバッグステートメントを通じてこの動作を追跡しました。
FutureBuilderがUIを構築しているときに表示されるはずの円形インジケーターも表示されません。
どうすればこれを解決できますか?
私のコード:
class _MyHomePageState extends State<MyHomePage>{
@override MyHomePage get widget => super.widget;
String userID = "";
String authID = "";
//Retrieving values from Shared Preferences
Future<List<String>> loadData() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
List<String> l= new List<String>();
if(prefs.getString("ID") == null){
l.add("null");
}
else{
l.add(prefs.getString("ID"));
}
if(prefs.getString("authID") == null){
l.add("null");
}
else{
l.add(prefs.getString("authID"));
}
return l;
}
//Setting values retrieved from Shared Pref
setData() async{
await loadData().then((value) {
setState(() {
userID = value[0];
print('the user ID is' + userID);
authID = value[1];
print('the authID is' + authID);
});
// getAllTasks(userID, authID);
});
print("Set data execution completed ");
}
//FUNCTION to use values from Shared Pref and make API Call
Future<List<Task>> getAllTasks() async{
await setData();
//Waiting for Set Data to complete
print('Ive have retrived the values ' + userID + authID );
List<Task> taskList;
await getTasks(userID, authID, "for_me").then((value){
final json = value;
if(json!="Error"){
Tasks tasks = tasksFromJson(json); //of Class Tasks
taskList = tasks.tasks; //getting the list of tasks from class
}
});
if(taskList != null) return taskList;
else {
print('Tasklist was null ');
throw new Exception('Failed to load data ');
}
}
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context){
_signedOut(){
widget.onSignedOut();
}
//To CREATE LIST VIEW
Widget createTasksListView(BuildContext context, AsyncSnapshot snapshot) {
var values = snapshot.data;
return ListView.builder(
itemCount: values == null ? 0 : values.length,
itemBuilder: (BuildContext context, int index) {
return values.isNotEmpty ? Ink(....
) : CircularProgressIndicator();
},
);
}
//MY COLUMN VIEW
Column cardsView = Column(
children: <Widget>[
....
Expanded(
child: FutureBuilder(
future: getAllTasks(),
initialData: [],
builder: (context, snapshot) {
return createTasksListView(context, snapshot);
}),
),
],
);
return Scaffold(
body: cardsView,
);
}
}
一度呼び出される代わりに...私のsetData関数が繰り返し呼び出されています..これを解決するにはどうすればよいですか..助けてください
Future
ウィジェットを再構築するたびにオブジェクトを作成します。また、メソッドsetState
内で呼び出してsetData
いるため、再帰的に再構築がトリガーされます。
この問題を解決するには、Future
オブジェクトへの参照を保持する必要があります。そして、その参照を使用するとFutureBuilder
、それが以前に使用されたものであることが理解できます。
例えば:
Future<List<Task>> _tasks;
@override
void initState() {
_tasks = getAllTasks();
super.initState();
}
そして、ウィジェットツリーで次のように使用します。
Expanded(
child: FutureBuilder(
future: _tasks,
initialData: [],
builder: (context, snapshot) {
return createTasksListView(context, snapshot);
}),
),
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加