Question

嗨，我正在将文件从json文件配置为完整站点。我想获取json文件并渲染到网站，所以我做了名为text.js的文件以获取并呈现json

text.js

import React from 'react' ;

 class text extends React.Component {
     constructor(props){
        super(props)
        this.state = {
          datat: [],
        };
      }
      componentDidMount(){
         fetch('/config.json')
          .then(response => response.json())
          .then((datao) =>{        
            this.setState({
                datat: (JSON.parse(JSON.stringify(datao)))
            })

          });
       }
      render(){
         const datatorender = this.state.datat
      return (datatorender);
        }}

  export default text;

并且我将此配置文件存储在公共

config.json

{
  "SITENAME": "site name",
  "SITE_DESCRIPTION":"desc",
  "META_OG_IMAGE":"",
  "META_APPLE_STATUS_BAR_COLOR":"#fff",
  "META_OG_TITLE":"hello world",
  "META_THEME_COLOR":"#66a6ff",
  "HOME": "Home",
  "CONTACT": "Contact",
  "EMAIL_TAG": "mailto:email@gmail.com",
  "PRIVACY": "Privacy Policy & Cookies",
  "CAPTION_UNDER_SITENAME": "say hello world withme",
  "USERNAME_PLACEHOLDER": "username",
  "GET_STORIES_BUTTON_TEXT": "Get",
  "SHOW_GOOGLE_TRANSLATER_BUTTON": "yes",
  "ADSENSE_AD_CLIENT": "ca-pub-98765432",
  "GOOGLE_ANALYTICS_TRACKING_ID": "UA-98765432-4",
  "FACEBOOK_APP_ID": "98765432345678",
  "ADS_UNDER_USERNAME_FILED": "<Image style=\"width:100%\" src=\"https://via.placeholder.com/728x90/e2e2e2/fff?text=Under%20input%20ads%20leaderboard%20%3C3\"  />",
  "ADS_UNDER_EACH_STORY": "<Image src=\"https://via.placeholder.com/336x280/e2e2e2/fff?text=Unde%20story%20box%20ads%20%3C3\" fluid />",
  "COPYRIGHT": "Copyright ©2019",
  "ALLRIGHT_RESEVER": "All rights reserved.",
  "SHOW_MADEWITH_IN_FOTTER":"yes",
  "MADEWITH": "Made with ❤ by @44cck",
  "MADEWITH_URL":"https://instagram.com/44cck",
  "SHOW_HOW_TO_USE_IN_HOME": "yes",
  "CUSTIMIZED_HOW_TO_USE": "no",
  "CUSTIMIZED_HOW_TO_USE_HTML": "<h1>custom how to use html</h1>",
  "DOWNLOAD": "Download",
  "COPIED": "✔ Copied !",
  "COPY": "Copy" 
}

获取错误：

Objects are not valid as a React child (found: object with keys {SITENAME, SITE_DESCRIPTION, META_OG_IMAGE, META_APPLE_STATUS_BAR_COLOR, META_OG_TITLE, META_THEME_COLOR, HOME, CONTACT, EMAIL_TAG, PRIVACY, CAPTION_UNDER_SITENAME, USERNAME_PLACEHOLDER, GET_STORIES_BUTTON_TEXT, SHOW_GOOGLE_TRANSLATER_BUTTON, ADSENSE_AD_CLIENT, GOOGLE_ANALYTICS_TRACKING_ID, FACEBOOK_APP_ID, ADS_UNDER_USERNAME_FILED, ADS_UNDER_EACH_STORY, COPYRIGHT, ALLRIGHT_RESEVER, SHOW_MADEWITH_IN_FOTTER, MADEWITH, MADEWITH_URL, SHOW_HOW_TO_USE_IN_HOME, CUSTIMIZED_HOW_TO_USE, CUSTIMIZED_HOW_TO_USE_HTML, DOWNLOAD, COPIED, COPY}). If you meant to render a collection of children, use an array instead.

我想在这样的情况下调用配置值： home.js

<h1>{Text.SITENAME}</h1>

Answer 1

那是因为您只是尝试直接渲染对象，而不能渲染必须渲染值/元素的对象。尝试这样的事情：

render(){
    const data = this.state.datat
    return ( Object.keys(data).map(key => <p>{key}:{data[key]}</p>) );
}

这样，您就可以遍历对象的所有键/属性并分别进行渲染

如何从文件获取JSON并将其呈现到reactjs中的组件

1 个答案: