在过滤循环中使用 React Native Text 组件

Question

我正在尝试从包含 parent/child 关系

的对象中呈现分层组件视图（在 Coffeescript 中）

我的对象看起来像

this.state =
  data: [
    {
      id: 1
      name: 'Category 1'
      type: 'category'
    },{
      id: 2
      parent: 1
      name: 'Task 1'
      type: 'task'
    },{
      id: 3
      parent: 1
      name: 'Task 2'
      type: 'task'
    },{
      id: 4
      name: 'Category 2'
      type: 'category'
    },{
      id: 5
      parent: 4
      name: 'Task 3'
      type: 'task'
    },{
      id: 6
      parent: 4
      name: 'Task 4'
      type: 'task'
    }
  ]

我目前的做法如下

render: ->
  <Text>Hierarchy</Text>
  { this.state.data.map( ( data ) =>
    if data.type == 'category'
      this.renderView( data )
  ) }

和

renderView: (data) ->
  <View>
    <View>
      <Text>{data.name}</Text>
    </View>
    <View>
      { result = this.state.data.filter( ( obj ) ->
        if obj.parent == data.id
          <Text>{obj.name}</Text>
      ) }
    </View>
  </View>

但是上面的代码会导致以下错误

Invariant Violation: Objects are not valid as a React child (found: object with keys {id,parent,name,type})

我知道在 filter() 循环中可以使用正确的数据。不知何故我不能在那里使用 React Native <Text> 元素，但为什么呢？

Answer 1

首先，return来自render

的renderView方法

render: ->
  <Text>Hierarchy</Text>
{
  this.state.data.map((data) =>
    if data.type == 'category'
      return this.renderView(data)
  ) }

此外，您必须先 filter result 然后 map 再

renderView: (data) ->
  { var result = this.state.data.filter(obj => obj.parent == data.id) }
  <View>
  <View>
    <Text>{data.name}</Text>
  </View>
  <View>
    {result.map(val => val.name)}
  </View>
  </View>

PS: 我不太了解 coffescript 的语法，对于任何打字错误，我们深表歉意，但逻辑可以正常工作。

Answer 2

你的代码有很多问题

在渲染函数中，您没有有效的 JSX 语法。因此，您需要将代码包装在一些包装器中。

<View>
      <Text>Hierarchy</Text>
      {this.state.data.map(data => data.type === 'category' && this.renderView(data))} // Also check if your map returns the data(Since I don't know coffeescript)
</View>

Filter 函数创建了一个新数组，您正试图在 View 中呈现该数组，因此 它抛出一个错误，不是有效的 React Child .

因此你可以

return (
            <View>
                <View>
                    <Text>{data.name}</Text>
                </View>
                <View>
                    {this.state.data.map( obj => obj.parent === data.id &&  <Text>{obj.name}</Text>)}
                </View>
        </View>)

在过滤循环中使用 React Native Text 组件

Use react native Text component in filter loop

coffeescript

react-native