如何解决undefined is not a function (near '...userForm.map...')？

Question

我正在尝试渲染一些字符串，但出现错误，有人知道如何解决吗？

代码：

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

  useEffect(() => {
    if (userForm.length > 0) {    
      console.log('userform',userForm,userForm.length); // not get inside here gives me a eror before it
      return
    }
    else{
      setuserForm(route.params.paramKey);
      console.log('TEST',userForm,'LENG',userForm.length)} // returns => TEST [] LENG 0
  },[userForm])
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={styles.textStyle}>COLLECTION :</Text>     
        {userForm.length > 0 ? (       
          userForm.map((item) => (          
            <Text key={uuid.v4()}>{item.fields}</Text>
          ))
        ) : (
          <Text key={uuid.v4()}> Loading ... </Text>
        )}
{..}

route.params.paramKey 是一个字符串

route.params.paramKey 字符串为 = {"objeto":"CLMobj_test","fields":["abcs","test"],"type":["Date","Text"]}

Answer 1

因为 route.params.paramKey 是一个字符串，所以不能直接调用 map。如果你想继续使用这种方法，你可以这样做：

setuserForm([...route.params.paramKey]);

编辑：添加后

route.params.paramKey = {"objeto":"CLMobj_test","fields":["abcs","test"],"type":["Date","Text"]}

你可以直接设置

setuserForm(JSON.parse(route.params.paramKey).fields)

并在其上使用地图

{userForm.length > 0 ?
  (userForm.map((item) => <Text key={uuid.v4()}>{item}</Text>):
  (<Text key={uuid.v4()}> Loading ... </Text>)
}

Answer 2

你能试试这段代码吗，注意我已经改变了“使用效果”条件，JSX 也改变了：

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

  useEffect(() => {
      setuserForm(JSON.parse(route.params.paramKey));
  },[])
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Text style={styles.textStyle}>COLLECTION :</Text>     
        {!!userForm && userForm.fields.length > 0 ? (       
          userForm.fields.map((item) => (          
            <Text key={uuid.v4()}>{item}</Text>
          ))
        ) : (
          <Text key={uuid.v4()}> Loading ... </Text>
        )}

如何解决undefined is not a function (near '...userForm.map...')？

How to solve undefined is not a function (near '...userForm.map...')?

javascript

jsx

react-native