草庐IT

dart - Flutter Future 和 setstate

coder 2023-07-22 原文

当我获得 API 调用的结果时，我正尝试添加一个图像小部件。我的代码是:

class AnimalDetailsPage extends StatefulWidget {
  final selection;

  _AnimalDetailsPage createState() => new _AnimalDetailsPage();
  AnimalDetailsPage({Key key, this.selection}) : super(key: key);
}

class _AnimalDetailsPage extends State<AnimalDetailsPage> {

  Future<List> getphotos(horseId) async {
    http.Response response = await http.get(
        Uri.encodeFull(
            "http://myhorses.com/api/getHorsePhotos?horse_id=" +
                horseId));
    return JSON.decode(response.body);
  }

  @override
  Widget build(BuildContext context) {

    final menu = new MyMenuBar();

    List<Widget> bodyContent = [menu];
    dynamic body = new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: bodyContent,
    );

    if (widget.selection != null) {
      final horse = widget.selection;
      getphotos(horse['id'].toString()).then((res) {
        setState(() {
          bodyContent.add(new Image.network(res[0]['image']));
        });
      });

    } 

    return Scaffold(
      body: body,
    );
  }
}

我无法理解的是 setState 不更新 View 。如果我将 setState 移出 then 语句并对图像 src 进行硬编码，那么它就可以正常工作。

最佳答案

bodyContent在 build() 内声明

  @override
  Widget build(BuildContext context) {

    final menu = new MyMenuBar();

    List<Widget> bodyContent = [menu];
    ...
    bodyContent.add(new Image.network(res[0]['image']));
    ...

和setState()原因build再次执行，这意味着 bodyContent保存图像的被丢弃并创建了一个新图像。

移动List<Widget> bodyContent = [menu];来自 build()方法并将其设为类级字段，您应该会得到所需的结果。

关于dart - Flutter Future 和 setstate，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50347804/

setstateFluttercodebodyContentAnimalDetailsPagedart

有关dart - Flutter Future 和 setstate的更多相关文章

  1. javascript - ReactJS:为什么在setState更改状态时调用构造函数 - 2

    我是ReactJS的新手，我制作了一个应用程序，您可以在其中提交姓名和电子邮件。姓名和邮件应显示在页面底部的列表中。它会显示一小段时间，然后调用构造函数并清除状态和列表。为什么在状态改变后调用构造函数？我以为构造函数只运行一次，然后render方法在setState()更改状态后运行。classAppextendsReact.Component{constructor(props){super(props);console.log("Appconstructor");this.state={signedUpPeople:[]};this.signUp=this.signUp.bind(

  2. javascript - React setState 在 while 循环期间不设置状态 - 2

    我想避免数据倍增，所以我想创建一个循环来为不同的site_id调用我的数据提供者。我创建了一个while循环并在此while循环中设置状态值。我意识到从我的2元素数组(我有2个站点)中只有1个被设置在状态中，而另一个没有。classDashboardextendsComponent{state={username:localStorage.getItem('username'),siteid:[{id:1,daily:"EKdaily",weekly:"EKweekly",monthly:"EKmonthly",total:"EKtotal",},{id:2,daily:"AKdail

  3. javascript - 在循环的每次迭代中都使用 setState 是不好的做法吗？ - 2

    这是一个小代码片段:asynccomponentDidMount(){...this.state.postList.forEach(element=>{this.fetchItem(element);});}asyncfetchItem(query){...this.setState(previousState=>{constlist=[...previousState.data,data];return{data:list};});}我很想知道在forEach循环的每次迭代中使用setState是否是个坏主意。我怀疑它会影响性能，但我想确定地知道，因为这似乎是解决此问题的最简单方法。

  4. javascript - Google Dart JavaScript 转换器是否支持旧版浏览器？ - 2

    GoogleDartJavaScript转换器支持旧版浏览器还是仅支持现代浏览器？ 最佳答案 根据technicaloverviewofitsofficialsite:您将能够以多种方式运行Dart代码:1.将Dart代码转换为可在任何现代浏览器中运行的JavaScript:Chrome、Safari5+和Firefox4+(即将推出更多浏览器支持)。2.在服务器端直接在虚拟机中执行Dart代码3.使用Dartboard在任何浏览器窗口中编写、修改和执行小型Dart程序Dart->JavaScript编译器几乎不可能支持旧版浏览器。

  5. javascript - 用 Dart 可视化？ - 2

    我的工作涉及大量的可视化。我一直在用D3.js和JavaScriptInfovistoolkit我最近了解到Dart如何成为开发Web应用程序的新方法。Q1。Dart是否提供任何用于可视化的库(某种级别的D3.js或JavaScriptInfovistoolkit)？Q2。如果我继续使用Dart，我可以使用D3.js吗？/JavascriptInfovistoolkit与Dart一起？编辑:我在互联网上发现wecanuseJavascriptalongwithDart.我经历了DartFAQ，但无法真正找到与可视化库或D3.js本身相关的任何内容。 最佳答案

  6. javascript - ReactJS onClick setState 到不同的元素 - 2

    我是新手，遇到了一些小问题。也许有人可以帮助我。所以问题是我无法使用onCLick函数触发我想要的元素。现在我试图在时删除导航importReactfrom"react";importReactDOMfrom"react-dom";exportdefaultclassNavextendsReact.Component{constructor(){super();this.state={navStatus:"navHide"};}navClose(){varnavOpened=document.getElementById("myNav");navOpened.setState({nav

  7. javascript - Bootstrap 开关 setState 给出 js 错误 - 2

    我正在尝试使用来自Ajax的条件返回值来更改Bootstrap开关的状态，HTML,if(objData.limit==='Yes'){$('#limit').bootstrapSwitch('setState',true);$("#limit_amount").prop("readonly",false);}else{$('#limit').bootstrapSwitch('setState',false);$("#limit_amount").prop("readonly",true);}但它抛出如下错误..UncaughtTypeError:Cannotreadproperty'

  8. javascript - 无法使用绑定(bind)到 `this.setState` 的对象文字调用 `partialState`，因为字符串 [1] 与字符串文字 [2] 不兼容 - 2

    我一直在用头撞墙试图让它工作，有什么建议吗？我在这里使用reactwithflow。我很难理解这些代码注释的东西，同时我也在学习。起初它是压倒性的，但在我花了一些时间在谷歌上搜索远程关闭的任何东西之后，我已经走到了死胡同。帮助？//@flowimportReact,{Component}from'react';importShowCardfrom'./ShowCard';importHeaderfrom'./Header';typeProps={shows:Array};typeState={searchTerm:""};classSearchextendsComponent{hand

  9. javascript - 超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况 - 2

    我正在制作这个Conway的生命游戏React项目，它工作得很好，但是当我添加最后几个按钮来清除棋盘时，React的一些其他功能给了我这个错误Maximumupdatedepthexceeded.ThiscanhappenwhenacomponentrepeatedlycallssetStateinsidecomponentWillUpdateorcomponentDidUpdate.Reactlimitsthenumberofnestedupdatestopreventinfiniteloops.从它向我展示的代码片段来看，clear()函数似乎是这里的问题，但我认为我没有在rend

  10. javascript - 来自 React Material UI MenuItem 单击事件的 setState - 2

    我正在尝试使用MaterialUI根据下拉选择更改状态。问题是下面的代码(精简)返回列表项，所以我不知道下一步该做什么。从handleClose方法中的console.log(event.target)返回精简组件:事件从API调用中获取。感谢您的任何想法。importReact,{Component}from"react";importButtonfrom"@material-ui/core/Button";importMenufrom"@material-ui/core/Menu";importMenuItemfrom"@material-ui/core/MenuItem";cla

随机推荐