Question

我正在尝试将数据从JSON文件传递到我的ReactJS应用，但是收到以下错误：

TypeError：无法读取未定义的属性'mainPage'

如果仅尝试console.log siteData，它将很好地工作。我猜测问题可能与访问对象参数有关

你能告诉我我在做什么错吗？

这是我的JSON对象：

{
    "data": {
        "mainPage": {
            "navBar": ["HR", "HR1", "HR2"],
            "name": "Name one",
            "agency": "agency one"
        },

        "secondPage": {
            "rank": 2,
            "name": "Name Two",
            "agency": "agency two"
        },

        "thirdPage": {
            "rank": 3,
            "name": "Name Three",
            "agency": "agency three"
        }
    }
}

我的.jsx文件：

import React from 'react';
import axios from 'axios';
import logo from '../img/company_logo.png';
import '../css/header.scss';

export default class Header extends React.Component {
  constructor() {
    super();
    this.state = {
      siteData: {},
    };
  }

  componentDidMount() {
    axios.get('./data.json')
      .then((res) => {
        this.setState({
          siteData: res.data,
        });
      })
      .catch((err) => {
        console.log(err);
      });
  }

  render() {
    // console.log(this.state);
    const { siteData } = this.state;
    console.log(siteData.data.mainPage);

    return (
      <div className="headerWrapper">
        <a href=".../public/index.html">
        <img src={logo} alt="company_logo" id="companyLogo" />
        </a>
        <ul>
          <li>Navbar_1</li>
          <li>Navbar_2</li>
          <li>Navbar_3</li>
        </ul>
      </div>
    );
  }
}

Answer 1

之所以会这样，是因为componentDidMount在组件的初始呈现后之后运行。您可以在其中声明以下内容的组件here的生命周期：

componentDidMount（）方法在组件输出具有呈现给DOM。

在render方法中，您应该检查它是否为null（与异步（AJAX）网络调用一样），即使您在渲染之前调用AJAX，也无法保证可以在初始渲染发生之前检索数据。发生。

Answer 2

Header组件的render()方法正在尝试访问mainPage的{{1}}字段，该字段最初并未定义。

要记住的一点是，组件data方法将在render()请求完成之前被调用。通常，这意味着您将需要在axios.get()请求进行期间呈现“正在加载”消息，或跳过全部呈现（如下所示）。

要应用这些想法，请考虑如下所示修改组件：

axio

Answer 3

您能这样尝试吗？我已经静态列出数据并通过setState而不是api调用以状态存储。在渲染中，检查siteData中是否有数据，然后仅映射数据，还可以按siteData的长度进行检查。

import React from 'react';
import axios from 'axios';
import logo from '../img/company_logo.png';
import '../css/header.scss';

export default class Roles extends React.Component {
constructor() {
    super();
    this.state = {
        siteData: {},
    };
}

componentDidMount = () => {
    let allData = {
        "data": {
            "mainPage": {
                "navBar": ["HR", "HR1", "HR2"],
                "name": "Name one",
                "agency": "agency one"
            },

            "secondPage": {
                "rank": 2,
                "name": "Name Two",
                "agency": "agency two"
            },

            "thirdPage": {
                "rank": 3,
                "name": "Name Three",
                "agency": "agency three"
            }
        }
    }
    this.setState({ siteData: allData.data })
}

render() {
    // console.log(this.state);
    const { siteData } = this.state;
    console.log(siteData && siteData.mainPage);

    return (
        <div className="headerWrapper">
            <a href=".../public/index.html"><img src={logo} alt="company_logo" id="companyLogo" /></a>
            <ul>
                <li>Navbar_1</li>
                <li>Navbar_2</li>
                <li>Navbar_3</li>
            </ul>
        </div>
    );
}
}

ReactJS：从JSON文件提取数据时出错

3 个答案: