如何解决文本字符串必须在嵌套地图中的 <Text> 内呈现？

Posted 2023-02-21

【中文标题】如何解决文本字符串必须在嵌套地图中的 <Text> 内呈现？

【英文标题】：How to solve Text strings must be rendered within a <Text> in nested map?

【发布时间】：2022-01-07 11:23:53

【问题描述】：

我没有找到解决嵌套映射函数中此错误的方法，我尝试的所有操作都以 sintax 错误告终。

我的代码：

    import codes....
    const FormScreen = (route) => 
     const [FieldForm, setFieldForm] = useState([]);
     const [TypeForm, setTypeForm] = useState([]);
      useEffect(() => 
      if (FieldForm.length > 0)    
        return;
       else 
        setFieldForm(JSON.parse(route.params.paramKey).message);
        setTypeForm(JSON.parse(route.params.paramKey).tipo);
        console.log('SETINGGG',FieldForm,TypeForm);
      
    ,[FieldForm,TypeForm]);
return (<View>             
             FieldForm.length > 0 ? (
                    FieldForm.map((item) => (
                      <>          
                        <Text>`$JSON.stringify(item)`</Text>
                        <>
                        TypeForm.map((type) => (  
                          <Text>`$JSON.stringify(type)`</Text>
                        ))
                        </>
                      </>
                    ))
                  ) : (
                    <Text key=uuid.v4()> Loading ...</Text>
                  )
            </View>

我试图删除这些组件，但没有成功，我怎样才能让它工作？

【问题讨论】：

item和type的类型是什么？

您是否尝试删除元素直到错误解决？

@MaartenDev 他们是一个对象（它是可变的），console.log(type,item) 的例子是"message": ["abs", "test"],"tipo": [ "Date","Text"]

等等，你希望 React native 如何显示该对象？它不知道如何渲染这些对象？

@MaartenDev 我试图删除其中一些 <> 和这些 <Text> ，但我所有的尝试都以一个 sintax 错误结束

【参考方案1】：

 TypeForm.map((type) => (  
    <Text>`$JSON.stringify(type)`</Text>
 )); // remove this ; (dot and comma)

【参考方案2】：

你可以使用像`$type`这样的模板字符串

我认为您最终会以 [Object] 作为文本正文，但这是开始获取所需值的良好起点。

编辑：` 被称为反引号，它们用于创建 template strings 或 string literals。我们不使用双引号来表示字符串值，而是使用它们。模板字符串能够在其中包含嵌套的对象值并打印它们的字符串表示。如果它只是您尝试在模板字符串中打印的 JSON 对象，您将最终打印 [Object]。这将告诉您，您实际上并没有打印您想要的对象的值，并且您可能在 type.value 之后，但是要找到您可能正在寻找的对象的键/值，您可以试试<Text>`$JSON.stringify(type)`</Text>。

【讨论】：

我不明白$type 的工作原理，你能解释一下吗？ @乔恩

当然！检查我的编辑，如果有任何不清楚的地方请告诉我。

我尝试将我所有的<Text> 标签更改为您建议的标签，谢谢，但它仍然给我同样的错误@Jon

我注意到您的代码块顶部也有...，这会导致语法错误，因为这是一个传播运算符，而您实际上并没有传播任何东西。

我更改并发布了整个代码 ... 我以前没有显示可能是“无用”的信息 @Jon