如何解决 JSX 中的无限循环？答案

【问题标题】：How to solve infinite loop in JSX?如何解决 JSX 中的无限循环？
【发布时间】：2022-01-06 07:08:49
【问题描述】：

我试图映射我的 userForm 状态以逐个渲染每个，但 map 函数有时将我返回为 undefiend，有时作为反应无限循环，我没有找到解决它的方法，somene 可以帮助我吗？

我的代码：

const FormScreen = async({route}) => { 
  const [userForm, setuserForm] = useState([]);

  if (userForm.length > 0) {
    console.log(userForm,'campos:',userForm.fields);
    return;
  } else {
    setuserForm(await JSON.parse(route.params.paramKey));
  }
         {...}

return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={styles.textStyle}>
          COLLECTION :
        </Text>

      {userForm.map((item) => (             
      <Text keys={item.fields}>test</Text>        
      ))} 
       
      </View>

    </SafeAreaView>
  );
 };

【问题讨论】：

标签： javascript react-native jsx

【解决方案1】：

将setuserForm(await JSON.parse(route.params.paramKey)); 移动到useEffect 挂钩中。

https://reactjs.org/docs/hooks-effect.html

【讨论】：

我认为这仍然会将 userform 设置为一个承诺，而不是 JSON.parse(route.params.paramKey) 的结果。
await 将返回一个承诺的结果。这就是await的目的
我好像搞错了。