為什么我的頁面加載項目，閃爍然后一切都消失了？

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()方法中，發生的事情是我們通過調用map方法循環遍歷recipes數組，並返回一個包含每個配方的行元素，列元素和配方卡的節點。

請注意，我們還在<div>上使用className而不是class 。

為什么我的頁面加載項目，閃爍然后一切都消失了？

問題描述

1 個解決方案

解決方案1
0 2019-05-12 20:55:08

為什么我的頁面加載項目，閃爍然后一切都消失了？

問題描述

1 個解決方案

解決方案1 0 2019-05-12 20:55:08

解決方案1
0 2019-05-12 20:55:08