Question

我正在创建食谱书，并且试图获取当前打开的食谱页面。

{this.state.recipes.map(res => {
  const recipeId = this.state.recipeId;
  if (res.id == recipeId) {
    this.setState({
      selectedRecipe: res
    });
  }
})}

如您所见，状态中有一个食谱字段，其中包含所有食谱，它们是从json早期获取的。 recipeId是当前打开的页面的ID，它也被保存过，在这种情况下，其值为0。现在，我要做的是从所有食谱中提取ID为0的食谱，并将其保存在selectedRecipe中，但是由于某些原因，我会遇到下一个错误：

“超出了最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。React限制嵌套更新的数量以防止无限循环。”

我该如何解决？

Answer 1

以这种方式重新组织代码：

const recipeId = this.state.recipeId
const recipe = this.state.recipes.map(res => res.id === recipeId)             

this.setState({ selectedRecipe: recipe })

Answer 2

您可以使用过滤器方法，假设食谱是在状态中声明的数组。

示例：

const selectedRecipe = this.state.recipes.filter(recipe => recipe.id === this.state.recipeId);
this.setState({ selectedRecipe });

Answer 3

apply plugin: 'com.android.application' android { signingConfigs { flavour1Release { keyAlias 'Flavour_1_alias' keyPassword 'password' storeFile file('C:/PATH/TO/KEY/Flavour_1_Keystore.jks') storePassword 'password' } flavour2Release { keyAlias 'Flavour_2_alias' keyPassword 'password' storeFile file('C:/PATH/TO/KEY/Flavour_2_Keystore.jks') storePassword 'password' } } compileSdkVersion 27 defaultConfig { applicationId "com.my.app" vectorDrawables.useSupportLibrary = true minSdkVersion 22 targetSdkVersion 22 versionCode 101 versionName "1.0.1" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" javaCompileOptions { annotationProcessorOptions { arguments = ["room.schemaLocation": "$projectDir/schemas".toString()] } } } flavorDimensions "customer" productFlavors { // productFlavour attributes override those in defaultConfig Flavour_1 { dimension "customer" signingConfig signingConfigs.flavour1Release } Flavour_2 { dimension "customer" signingConfig signingConfigs.flavour2Release } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } dataBinding { enabled = true } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } defaultConfig { multiDexEnabled true } lintOptions { checkReleaseBuilds false abortOnError false } } dependencies { implementation fileTree(include: ['*.jar', '*.arr'], dir: 'libs') }不在这里使用。

map

如果您在渲染中调用此代码（而不是const selectedRecipe = this.state.recipes.find(recipe => recipe.id === this.state.recipeId); this.setState({ selectedRecipe });或类似的代码），则将进入一个循环，在该循环中您将强制重新设置状态，从而导致重新设置渲染设置状态，导致重新渲染。...

在这种情况下，最好还是看看onClick。如果在componentDidUpdate中调用此方法，则应该没问题。

Answer 4

代替尝试在render方法中使用case，您可以在获得食谱后直接在数组方法find的帮助下设置test。

示例

setState

如何结合map和setState

4 个答案: