render 没有返回任何内容。这通常意味着缺少返回语句答案

【问题标题】：Nothing was returned from render . This is usually means a return statement is missingrender 没有返回任何内容。这通常意味着缺少返回语句
【发布时间】：2021-07-25 17:03:45
【问题描述】：

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

   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>
     )
   }

渲染没有返回任何内容。这通常意味着缺少 return 语句。这里似乎有什么错误？

【问题讨论】：

问题可能出在另一个组件上。例如，检查 MyCard 组件。渲染有回报吗？

标签： reactjs react-native render

【解决方案1】：

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

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

【讨论】：

确实，钥匙不见了