时间戳

首页 > 解决方案 > 在本机反应中设置状态会冻结应用程序

javascript - 在本机反应中设置状态会冻结应用程序

问题描述

在本机反应中，我正在尝试创建一个类组件，该组件加载带有标签和附加 AWS S3 图像的类别列表。

如果您查看此代码，应用程序将冻结在行：

   this.setState({ categories });

但是，如果我注释掉该行，控制台会记录该类别数组就好了。

请帮助任何想法为什么？我也尝试过创建一个功能组件，但同样会发生这种情况。

import React, { Component, setState } from "react";
import { View, StyleSheet } from "react-native";
import { isTablet } from "react-native-device-detection";

import { getRecipeCategories } from "../../api/recipeCategoriesApi";
import CategoryImageItem from "./CategoryImageItem";
import { getS3Image, deleteS3Image } from "../../utility/amplify";

class CategoryImagePicker extends Component {
  state = {
    categories: [],
  };

  async componentDidMount() {
    console.log("loadCats");
    let res = await fetch("http://192.168.1.4:4000/api/recipe_categories");
    let categories = await res.json();
    for (const category of categories) {
      const imgUrl = await getS3Image(category.category_image);
      category.imageUrl = imgUrl.split("?")[0];
    }
    console.log("returned");
    this.setState({ categories });
    console.log("set done...", categories);
  }

  loadViews() {
    let i = 0;
    let rowType = "odd";
    let viewRows = [];

    const { categories } = this.state;

    console.log(categories.length);
    while (i < categories.length) {
      console.log("//", i);
      if (isTablet) {
        switch (rowType) {
          case "odd":
            if (i == categories.length - 1) {
              viewRows.push(this.renderEvenRow(i, categories[i]));
            } else {
              viewRows.push(
                this.renderOddRow(i, categories[i], categories[i + 1])
              );
              rowType = "even";
              i += 2;
            }
            break;
          case "even":
            viewRows.push(this.renderEvenRow(i, categories[i]));
            rowType = "odd";
            i += 1;
            break;
          default:
            break;
        }
      } else {
        viewRows.push(this.renderEvenRow(i, categories[i]));
      }
    }

    return viewRows;
  }

  handleShowRecipesForCategory = (category) => {
    this.props.onShowRecipesForCategory(category);
  };

  renderOddRow(i, categoryLeft, categoryRight) {
    return (
      <View style={styles.oddRow} key={i}>
        <CategoryImageItem
          category={categoryLeft}
          onShowRecipesForCategory={() =>
            this.handleShowRecipesForCategory(categoryLeft)
          }
        />
        <CategoryImageItem
          category={categoryRight}
          onShowRecipesForCategory={() =>
            this.handleShowRecipesForCategory(categoryRight)
          }
        />
      </View>
    );
  }

  renderEvenRow(i, category) {
    return (
      <View style={styles.evenRow} key={i}>
        <CategoryImageItem
          category={category}
          onShowRecipesForCategory={() =>
            this.handleShowRecipesForCategory(category)
          }
        />
      </View>
    );
  }

  render() {
    return <View style={styles.container}>{this.loadViews()}</View>;
  }
}

标签： javascriptreactjsreact-native

解决方案

componentDidMount不应该async。

componentDidMount(){
    this.getCategories()
}
getCategories = async () => {
    console.log("loadCats");
    let res = await fetch("http://192.168.1.4:4000/api/recipe_categories");
    let categories = await res.json();
    for (const category of categories) {
      const imgUrl = await getS3Image(category.category_image);
      category.imageUrl = imgUrl.split("?")[0];
    }
    console.log("returned");
    this.setState({ categories });
    console.log("set done...", categories);
}

如果这不起作用，您可以添加您从中获得的console.log("set done...", categories);内容和您的期望吗

推荐阅读