React Native FlatList 不渲染项目答案

【问题标题】：React Native FlatList not rendering itemsReact Native FlatList 不渲染项目
【发布时间】：2019-10-28 14:09:43
【问题描述】：

<Query
      query={FETCH_EVENTS}>
      {
        ({data, error, loading }) => {
          if (loading) return null;
          if (error) {
            console.error(error);
            return <Text>An error occured</Text>;
          }
          if (!data.allEvents) return null;
          return(
            <FlatList
              style={{flex: 1}}
              data={data.allEvents}
              renderItem={({ item }) => {
                <EventCard
                  event={item}
                  key={item.id}
                  latitude={latitude}
                  longitude={longitude}
                  />
              }}
              keyExtractor={item => item.id}
            />
          )
        }
      }
    </Query>

上面的代码突然无缘无故停止工作，我不明白为什么 FlatList 不再呈现项目。

当我直接将 FlatList 替换为以下组件时，它会工作并呈现，因此问题不应该与组件相关，而是与 FlatList 相关。

return(
            <EventCard
              event={data.allEvents[0]}
              key={data.allEvents[0].id}
              latitude={latitude}
              longitude={longitude}/>
          )

【问题讨论】：

请发布错误日志。
没有错误日志，只是没有渲染。 @bk7
检查我的答案@Hugo

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

你忘记在 renderItem 中返回语句

试试这个

               <FlatList
                  style={{flex: 1}}
                  data={data.allEvents}
                  renderItem={({ item }) => {
                 return(
                    <EventCard
                      event={item}
                      key={item.id}
                      latitude={latitude}
                      longitude={longitude}
                      />);
                  }}
                  keyExtractor={item => item.id}
                />

或

        <FlatList
                  style={{flex: 1}}
                  data={data.allEvents}
                  renderItem={({ item }) => 

                    <EventCard
                      event={item}
                      key={item.id}
                      latitude={latitude}
                      longitude={longitude}
                      />
                  }
                  keyExtractor={item => item.id}
                />

上述两种解决方案都应该有效

【讨论】：

【解决方案2】：

您没有返回 EventCard

renderItem={({ item }) => (
            <EventCard
              event={item}
              key={item.id}
              latitude={latitude}
              longitude={longitude}
              />
 )}

而不是

renderItem={({ item }) => {
            <EventCard
              event={item}
              key={item.id}
              latitude={latitude}
              longitude={longitude}
              />
  }}

【讨论】：