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

Question

我试图映射我的 userForm 状态以逐个渲染，但映射功能有时 returns 我是不守规矩的，有时是反应无限循环，我找不到解决它的方法，有人可以帮助我吗？

我的代码：

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>
  );
 };

Answer 1

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

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

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

How to solve infinite loop in JSX?

javascript

jsx

react-native