render未返回任何内容。这通常意味着缺少返回语句

Question

我不知道问题出在哪里。我无法解决此错误

   import { View, Text, text, TextInput, password, Image, } from 'react-native';
   import React, { useEffect, useState, Component } from 'react';
   import { FontAwesome } from '@expo/vector-icons';
   import { AntDesign } from '@expo/vector-icons';
   import { Container, Header, Content, ListItem, CheckBox, Button, Body, Grid } from 'native-base';
   import Mycard from './Mycard'
   import { getMatches } from './Api';


   export default function Home() {

     //code

     const [matches, setmatches] = useState([]);

     useEffect(() => {
         getMatches()
           .then((data) => {
             setmatches(data.matches);
             console.log(data.matches);
           })
           .catch((error) => alert("could not load data"));
       }, []

     );

     // where is the problem ?


     return (
      <View style={{ flex: 1,}}>
        <Grid Container>
          <Grid></Grid>
           <Grid>
             {
               matches.map((match)=>
               (<Mycard match="match" />)
              )
              }
           </Grid>
        </Grid>
    </View>
     )
   }

render未返回任何内容。这通常意味着缺少返回语句。这里的错误似乎是什么？

Answer 1

React不喜欢我们在没有给组件分配键的情况下遍历组件。您可能应该向Mycard元素添加一个key属性：

<Grid>
{
  matches.map((match, index)=> (<Mycard key={index} match={match} />))
}
</Grid>