页面内容未显示在源代码中 [英] Page Content is not showing in source code

查看：115
本文介绍了页面内容未显示在源代码中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试为 API 获取内容并显示一个页面，它工作正常，但是当我尝试查看页面源代码时，它没有显示我从 API 获取的那些内容.我正在使用 next.js这个项目和我使用的代码如下.有没有人可以帮我解决这个问题?

import React, { Fragment, useEffect,useState } from 'react'从../Config/Settings"导入 {API_BASE_URL}从'../Layouts/SideBar'导入侧边栏从下一个/链接"导入链接从下一个/头"导入头从'../styles/Home.module.css' 导入样式从 'axios' 导入 axiosexport const CmsPage = (props) =>{const [PageHtmlContent, setPageContent] = useState('');const [PageTitle, setPageTitle] = useState('');const [PageDescription, setPageDescription] = useState('');const [SeoKeyword,setSeoKeyword]=useState('');useEffect( async() => {让 body={pageTypeCode:props.pageType,pageName:props.pageName};常量配置 ={标题:{x-auth-token":rpsite-public-token"}}尝试 {const res= await axios.post(API_BASE_URL+'/api/cms/page',body,config);//警报(res.data.content)；setPageContent(res.data.content);setPageTitle(res.data.seoTitle);setPageDescription(res.data.seoDescription);setSeoKeyword(res.data.seoKeyword);}抓住(错误){setPageContent('<b>出了点问题！</b>');}}，[道具]);返回 (<section class="inner-body-section"><头><title>{PageTitle}</title><元名称=视口"内容=初始比例=1.0，宽度=设备宽度"；/><元名称=关键字"content={SeoKeyword}/><元名称=描述"内容={页面描述}/></头><div class="container"><div class="row"><div class="col-md-3"><侧边栏/>

<div class="col-md-9"><div className="inner-body-content"><div id="contentBlock";className =页面内容"risklySetInnerHTML={{__html:PageHtmlContent}}></div>

</节>)}导出默认的 CmsPage；

解决方案

当你查看 View Page Source 时，你得到的是服务器返回的 HTML.

因为您是在 useEffect 中发出请求并填充数据，所以这只会发生在客户端上.

如果您希望将数据填充到服务器上，您可能需要查看 getStaticProps 或 getServerSideProps 代替.

I am trying to fetch content for a API and show it a page , It's working fine but when i am trying to view page source code it's not showing those content that i am getting from API.I am using next.js for this project and the code that i have used is following. Is there anyone who can help help me to solve this issue?

import React, { Fragment, useEffect,useState } from 'react'
import {API_BASE_URL} from '../Config/Settings'
import SideBar from '../Layouts/SideBar'
import Link from "next/link"
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import axios from 'axios'



export const CmsPage = (props) => {

    const [PageHtmlContent, setPageContent] = useState('');
    const [PageTitle, setPageTitle] = useState('');
    const [PageDescription, setPageDescription] = useState('');
    const [SeoKeyword,setSeoKeyword]=useState('');

    useEffect( async() => {
        let body={pageTypeCode:props.pageType,pageName:props.pageName};
        const config =
        {
            headers:
            {
                'x-auth-token':"rpsite-public-token" 
            }
        }
        try {
            const res= await axios.post(API_BASE_URL+'/api/cms/page',body,config);
           // alert(res.data.content);
           setPageContent(res.data.content);
           setPageTitle(res.data.seoTitle);
           setPageDescription(res.data.seoDescription);
           setSeoKeyword(res.data.seoKeyword);
        }
        catch(err)
        {
            setPageContent('<b>Something went wrong!</b>');
        }
    
      },[props]);
    return (
        <section class="inner-body-section">
              <Head>
               <title>{PageTitle}</title>
               <meta name="viewport" content="initial-scale=1.0, width=device-width" />
               <meta name="keywords" content={SeoKeyword} />
               <meta name="description" content={PageDescription}/>
             </Head>
            <div class="container">
                    <div class="row">
                        <div class="col-md-3">
                            <SideBar/>
                        </div>
                        <div class="col-md-9">
                           <div className="inner-body-content">
                                <div id="contentBlock" className="page-content" dangerouslySetInnerHTML={{__html:PageHtmlContent}}></div>
                                </div>
                           </div> 
                        </div>
                </div>
       </section>  
    )
}

export default CmsPage;

解决方案

What you get when looking at View Page Source is the HTML returned by the server.

Because you're making the request and populating the data inside a useEffect this will only occur on the client.

If you want the data to be populated on the server you may want to have a look at getStaticProps or getServerSideProps instead.

这篇关于页面内容未显示在源代码中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆