Question

我有这段代码可以从API中读取并在屏幕上显示所有信息。当我尝试访问localhost：3000时，我可以看到所有信息，但此信息随即消失。

不确定是否缺少某些内容，但是我在控制台上收到一些警告，内容如下：

index.js：1警告：没想到服务器HTML包含in。

因为这只是一个警告，所以我不确定它是否会导致我得到错误，但控制台上没有其他错误...

我打开了源代码，所有信息都在那里，一切似乎都正确。

这是我的index.js代码：

const Index = (props) => (
    <Layout>
        <RecipeCardsLayout recipes={props.recipes} />
    </Layout>   
)

Index.getInitialProps = async function() {
  const res = await fetch('http://localhost:8080/api/public/recipes')
  const data = await res.json()

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    recipes: data
  }
}

这是我的布局代码：

const Layout = props => (
  <div>
    <Header />
    {props.children} {/* important so Layout children will be rended */}
  </div>
)

这是我的标题：

const Header = () => (
  <div>
    <Head>
      <title>How to Keto Cook</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    </Head>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">How to Keto Cook</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
)

在这里，我相信这里缺少一些东西：这是RecipeCardsLayout

class RecipeCardsLayout extends React.Component {    
    render() {
        let rows = [];

        while(this.props.recipes.length > 0){
            var recipes = this.props.recipes.splice(0, 4);
            let cols = [];

            for(var i = 0; i < recipes.length; i++){
                let col = [];                
                col.push(
                    <div class='col-sm-3'>
                        <RecipeCard id={recipes[i].id} name={recipes[i].name} url={recipes[i].image.url}></RecipeCard>
                    </div>
                );

                cols.push(col);
            }
            let row = <div class='row'>{cols}</div>;
            rows.push(row);
        }

        return (
            <div>{rows}</div>               
        )
   }

}

如果有人可以给我一个有关如何调试和发现此错误的指导，那将非常棒。我是React和Nextjs的新手，由于在控制台上看不到任何错误，调试它有点困难。

Answer 1

试试看...

class RecipeCardsLayout extends React.Component {
  render() {
    return (
      <div>
        {
          recipes.map(recipe => {
            return (
              <div className="row" key={recipe.id}>
                <div className="col-sm-3">
                  <RecipeCard id={recipe.id} name={recipe.name} url={recipe.image.url} />
                </div>
              </div>
            )
          })
        }
      </div>
    );
  }
}

在render()方法中，正在发生的事情是，我们通过调用recipes方法并返回包含行元素，列元素的节点来遍历map数组以及每个食谱的食谱卡。

请注意，我们也在className上使用class而不是<div>。

为什么我的页面加载项目，闪烁然后一切都消失了？

1 个答案: