Reactjs 未定义使用REACT.JS从JSON文件中的fetch请求获取值_Reactjs

Reactjs 未定义使用REACT.JS从JSON文件中的fetch请求获取值

reactjs

Reactjs 未定义使用REACT.JS从JSON文件中的fetch请求获取值,reactjs,Reactjs,我来自Vue环境我对此有点困惑，我读了一些类似的问题，但我没能让它起作用为什么我不能回显从获取请求获取的嵌套对象的值 Iconsole.log在setState之后，我得到了值，但在渲染中未定义 import React, { Component } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; class App extends Component { constructor() {

我来自Vue环境我对此有点困惑，我读了一些类似的问题，但我没能让它起作用

为什么我不能回显从获取请求获取的嵌套对象的值

console.log

在

setState

之后，我得到了值，但在渲染中未定义

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoading: true,
      articles: {}
    };
  }

  componentDidMount() {
    this.setState({ loading: true });
    fetch("./articles.json")
      .then(response => response.json())
      .then(result => {
        this.setState({
          isLoading: false,
          article: result.blog.article
        });
        console.log(
          "componentDidMount__this.state.article=",
          this.state.article.link.title
        ); //this gets the value
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    //let articleTitle;
    // this gets error ----> console.log(this.state.article.link.title);
    // because .link is undefined

    // console.log(this.state.article);
    // if (this.state.article !== "undefined") {
    //   console.log("wait what?..");
    // if I changed the state in fetch why this stil
    //   articleTitle = this.state.article.link.title;
    // } else {
    //   articleTitle = "";
    // }

    // I assign "this.state.article.link.title" to a variable so I can avoid the error,
    //
    return (
      <div className="App">
        {/*<h1>{articleTitle}</h1> */}
        <h1>{this.state.article.link.title}</h1>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在渲染中使用动态状态之前，必须进行检查，因为在组件装载和更新时都会调用动态状态

这应该很好：

{this.state.isLoading？''：this.state.article.link.title}

在渲染中使用动态状态之前必须进行检查，因为在组件装载和更新时都会调用动态状态

这应该很好：

{this.state.isLoading？''：this.state.article.link.title}

当

this.state.article==未定义时，似乎引用了this.state.link.title

解决方案是以更安全的方式检索this.state.article.link.title

这通常是通过杠杆实现的。在下面的示例中，我还使用了和
还建议将默认值指定给此状态，尤其是在处理不确定数据时
// Default `this.state`.
this.state = {
  article: {link: {title: ''}},
  articles: {},
  isLoading: true,
}

// Safe retrieval of `title`.
const {article = {}} = this.state
const {link = {}} = article.link
const title = link.title || ''

当this.state.article===未定义时，似乎正在引用this.state.article.link.title

解决方案是以更安全的方式检索this.state.article.link.title

这通常是通过杠杆实现的。在下面的示例中，我还使用了和
还建议将默认值指定给此状态，尤其是在处理不确定数据时
// Default `this.state`.
this.state = {
  article: {link: {title: ''}},
  articles: {},
  isLoading: true,
}

// Safe retrieval of `title`.
const {article = {}} = this.state
const {link = {}} = article.link
const title = link.title || ''

试试这个
   import React, { Component } from "react";
    import ReactDOM from "react-dom";

    import "./styles.css";

    class App extends Component {
      constructor() {
        super();
      }
      state = {
        isLoading: true,
        articles: {}
      };
      componentDidMount() {
        this.setState({ loading: true });
        fetch("./articles.json")
          .then(response => response.json())
          .then(result => {
            this.setState({
              isLoading: false,
              articles: result.blog.article
            });
          })
          .catch(error => {
            console.error(error);
          });
      }

      render() {
        let Test = this.state.articles ? (
          <div className="App">
            <h1>{this.state.articles.title}</h1>
          </div>
        ) : null;

        console.log(this.state.articles.title);
        return <div>{Test}</div>;
      }
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

import React，{Component}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
}
状态={
孤岛加载：是的，
文章：{}
};
componentDidMount（）{
this.setState（{loading:true}）；
获取（“./articles.json”）
.then（response=>response.json（））
。然后（结果=>{
这是我的国家({
孤岛加载：false，
文章：result.blog.article
});
})
.catch（错误=>{
控制台错误（error）；
});
}
render（）{
让Test=this.state.articles(
{this.state.articles.title}
)：null；
log（this.state.articles.title）；
返回{Test}；
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
试试这个
   import React, { Component } from "react";
    import ReactDOM from "react-dom";

    import "./styles.css";

    class App extends Component {
      constructor() {
        super();
      }
      state = {
        isLoading: true,
        articles: {}
      };
      componentDidMount() {
        this.setState({ loading: true });
        fetch("./articles.json")
          .then(response => response.json())
          .then(result => {
            this.setState({
              isLoading: false,
              articles: result.blog.article
            });
          })
          .catch(error => {
            console.error(error);
          });
      }

      render() {
        let Test = this.state.articles ? (
          <div className="App">
            <h1>{this.state.articles.title}</h1>
          </div>
        ) : null;

        console.log(this.state.articles.title);
        return <div>{Test}</div>;
      }
    }

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

import React，{Component}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
}
状态={
孤岛加载：是的，
文章：{}
};
componentDidMount（）{
this.setState（{loading:true}）；
获取（“./articles.json”）
.then（response=>response.json（））
。然后（结果=>{
这是我的国家({
孤岛加载：false，
文章：result.blog.article
});
})
.catch（错误=>{
控制台错误（error）；
});
}
render（）{
让Test=this.state.articles(
{this.state.articles.title}
)：null；
log（this.state.articles.title）；
返回{Test}；
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
似乎在获取方法完成之前调用了三次render方法，所以在render方法中，this.state.articles
是空对象。您还想知道为什么教程中的guy没有这个问题，在object:中使用了this.state.character.name
，在您的代码中使用了this.state.articles.link.title
。这就是区别，因为可以使用This.state.character.name
（它引用空对象中的属性，因此它将返回未定义，而您的This.state.article.link.title
（它尝试访问不存在的对象上的属性）。您可以在控制台中检查它：
const obj = {};
console.log(obj.property); //undefined
console.log(obj.link.title); // Uncaught TypeError: Cannot read property 'title' of undefined

似乎在获取方法完成之前调用了三次render方法，所以在render方法中，this.state.articles

是空对象。您还想知道为什么教程中的guy没有这个问题，在对象中：
this.state.character.name
被使用，并且在您的代码中
this.state.articles.link.title
。这就是区别，因为可以使用
This.state.character.name
（它引用空对象中的属性，因此它将返回未定义，而您的
This.state.article.link.title
（它尝试访问不存在的对象上的属性）。您可以在控制台中检查它：

const obj = {}; console.log(obj.property); //undefined console.log(obj.link.title); // Uncaught TypeError: Cannot read property 'title' of undefined

可能的重复是一个完全不同的问题…答案也不能解决我的问题…我不需要在回调中使用console.log…我可以使用console.log查看数据…问题是呈现未定义的代码沙盒..在react组件中，当组件的实例是c时，按以下顺序调用方法创建并插入DOM
1.constructor（）
<2.static getDerivedStateFromProps（）
3.render（）
4.componentDidMount（）
ie，在
componentDidMount
方法之前执行的
render
方法..它的可能重复是一个完全不同的问题…答案也不能解决我的问题…我不需要在回调中使用console.log…我可以console.log并查看数据…问题是呈现u