如何解决 undefined is not a function（'...userForm.map...'附近）？答案

【问题标题】：How to solve undefined is not a function (near '...userForm.map...')?如何解决 undefined is not a function（'...userForm.map...'附近）？
【发布时间】：2022-01-06 12:13:22
【问题描述】：

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

代码：

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"]}

【问题讨论】：

您能否发布完整错误消息的副本/粘贴？这应该更有助于其他人更好地理解问题。
@StaceyBurns 事实上这是完整的错误消息TypeError: undefined is not a function (near '...userForm.map...') This error is located at: {...}
感谢@Guilherme，您是否尝试过使用 userForm && userForm.length > 0 作为 userForm.map 之前的条件？（而不仅仅是 userForm.length > 0）
@StaceyBurns Yeap ，错误仍然存在
嗯，看到您最近的编辑，看起来您有一个格式化为字符串的 json 对象。从您的示例中，您是否尝试映射 "abcs" 和 "test" ？给定您提供的字符串，您希望呈现什么？

标签： javascript react-native jsx

【解决方案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>)
}

【讨论】：

它删除了我的错误但是，你知道为什么它会返回这个 console.log["{\"objeto\":\"CLMobj_test\",\"fields\":[\"abcs\",\"test\"],\"type\":[\"Date\",\"Text\"]}"]
根据新的细节更新了答案
我刚刚输入了setuserForm([route.params.paramKey])，它就开始向我返回那个疯狂的 json @DipanshKhandelwal
你要加... setuserForm([...route.params.paramKey])
当我添加这个时，当我这样添加时，查看userForm 的日志会变得更加疯狂。 (` ["{", "\"", "o", "b", "j", "e", "t", "o", "\"", ":", "\"", “C”、“L”、“M”、“o”、“b”、“j”、“_”、“t”、“e”、“s”、“t”、“\”、“ , ", "\"", "f", "i", "e", "l", "d", "s", "\"", ":", "[", "\"", "a"、"b"、"c"、"s"、"\""、","、"\""、"t"、"e"、"s"、"t"、"\"" 、"]"、","、"\""、"t"、"y"、"p"、"e"、"\""、":"、"["、"\""、"D "、"a"、"t"、"e"、"\""、","、"\""、"T"、"e"、"x"、"t"、"\""、" ]", "}"] `)

【解决方案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>
        )}

【讨论】：

当我使用它时，userForm.length 不起作用@AmineBENETTAJ
@GuilhermeCavenaghi 是的，将其更改为“userForm.fields.length”
当我这样放时，它返回我 `userForm.fields.length` 是未定义的
@GuilhermeCavenaghi 我编辑了答案，更改了 UseEffect 函数和返回的 JSX。