组件不在本机反应中返回平面列表内部

Question

试图有条件地 return 平面列表中的项目，但它没有 return 反应本机中的任何内容。提前致谢

<FlatList
              data={posts}
              ref={(c) => {this.flatList = c;}}
              keyExtractor={(item, index) => index.toString()}
              renderItem={({item}) => {
                  item.categories_name.map(category=>{
                    let cat = category.toLowerCase();
                    if(cat=='movie'){
                      <Text style={{fontSize:20,color:'white'}}>This is movie</Text>
                    }
                    else(
                       <Text style={{fontSize:20,color:'white'}}>This is normal post</Text>
                      )
                    }
                  })
                  //<PostItem onImagePress={()=>this.toggleModal(item.id)} route={this.state.route_name} post={item}/>
                }
              }
              />

Answer 1

使用 renderItem 时需要 return JSX 元素。

当您看到 renderItem={({item}) => <Text>{item.key}</Text>} 时。它是 shorthand 的：

renderItem={({item}) => {
    return <Text>{item.key}</Text>
}}

所以像下面这样的东西应该可以工作：

<FlatList
  data={posts}
  ref={(c) => {this.flatList = c;}}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item}) => {
    return item.categories_name.map(category=>{
      let cat = category.toLowerCase();
      if(cat=='movie'){
        return <Text style={{fontSize:20,color:'white'}}>This is movie</Text>
      } else {
        return <Text style={{fontSize:20,color:'white'}}>This is normal post</Text>
      }
    })
    ...

你应该注意到上面的 renderItem returns whatever .map returns （它应该是一个 JSX 元素的数组。这个 return 里面.map fn 也是必需的：return <Text style... 因为这就是你想要使用 .map 的方式，*你想要 return 元素数组* 如果不是很清楚请检查 .map 然后自己想办法。这应该能更好地帮助你

希望对您有所帮助

Answer 2

你能重新安排你的代码如下吗？

<FlatList
          data={posts}
          ref={c => {
            this.flatList = c;
          }}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => {
            let views = [];
            item.categories_name.map(category => {
              let cat = category.toLowerCase();
              if (cat == "movie") {
                views.push(
                  <Text style={{ fontSize: 20, color: "white" }}>
                    This is movie
                  </Text>
                );
              } else {
                views.push(
                  <Text style={{ fontSize: 20, color: "white" }}>
                    This is normal post
                  </Text>
                );
              }
            });
            return views;
            //<PostItem onImagePress={()=>this.toggleModal(item.id)} route={this.state.route_name} post={item}/>
          }}
        />

组件不在本机反应中返回平面列表内部

Components not returning inside flatlist in react native

react-native

react-native-flatlist

map-function