next.js 为什么我的页面加载项目， Flink ，然后一切都消失了？

pkln4tw6 于 2023-08-04 发布在 Flink

关注(0)|答案(2)|浏览(122)

我有这段代码从一个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>
)

型
这是我的header：

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的新手，发现调试这个有点困难，因为我在控制台上看不到任何错误。

next.js

来源：https://stackoverflow.com/questions/56103124/why-my-page-load-items-blink-and-then-everything-disappears

2条答案

按热度按时间

a14dhokn1#

试试这个

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()方法中，我们通过调用map方法并返回一个节点来循环recipes数组，该节点包含每个食谱的行元素、列元素和食谱卡。
请注意，我们还在<div>上使用className而不是class。

赞(0）回复(0）举报 2023-08-04

izj3ouym2#

答案很简单，在{props.children}上添加一个片段

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

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

next.js 为什么我的页面加载项目， Flink ，然后一切都消失了？

2条答案

相关问题

热门标签

最新问答