Question

我有一个数据对象变量，该变量通过我的VS Code控制台使用以下代码行输出期望的名称数组：

data.Subjects.map((x) => x.Name)

我正在尝试使用这样的Name值渲染Text组件：

data.Subjects.map((x) => {
    <Text>{x.Name}</Text>
});

但是，上面的代码在我的Android模拟器中返回以下错误：

“不变违反：文本字符串必须在文本中呈现组件。”

您知道问题可能在这里还是我应该如何更新代码？

-更新-

好的，这是render（）方法的精简版本，其中仍然出现相同的错误：

  render(){
    let data = ['test1','test2'];
    return (
      <>
        <View>
          data.map((x) => {
            <Text>x</Text>
          });
        </View>
      </>
    );
  }

Answer 1

尝试一下

render(){
  let data = ['test1','test2'];
  return (
    <View>
      {data.map((x) => (
        <Text>{x}</Text>
      ))}
    </View>
  );
}

基本上，如果您不data.map时将其理解为文本，则将其解释为文本。

@ktad也正确，您需要像这样更改地图：

data.map((x) => (
  <Text>{x}</Text>
))

或者这个：

data.map((x) => <Text>{x}</Text>)

或者这个：

data.map((x) => {
  return <Text>{x}</Text>
})

否则什么也不会返回

Answer 2

尝试使用括号代替大括号

data.Subjects.map((x) => (
  <Text>{x.Name}</Text>
));

在React中构造此文本渲染的正确方法是什么？

2 个答案: