为什么我无法获得对象ReactJs的属性

Question

我有这段代码，我试图将变量传递到JSX到React Js脚本的render部分。我有一个错误Cannot read property 'title' of undefined。

为什么在对象中具有此属性？

constructor() {
  super();
  this.state = {
    blogs: []
  };
}

componentDidMount() {
  const blogss = [
    {
      title: "Всемогущая функция Query — подробное руководство",
      author: 1,
      viewers: 213
    },
    {
      title: "Всемогущая функция Query — подробное руководство",
      author: 1,
      viewers: 213
    }
  ];
  this.setState(() => ({ blogs: blogss }));
}

render() {
  const { blogs } = this.state;
  return <h1>{blogs[0].title}</h1>;
}

Answer 1

这正在工作！我想知道问题是什么吗？请检查此代码段！

class App extends React.Component {

  render() {
    const blogs = [{
        "title": "Всемогущая функция Query — подробное руководство",
        "author": 1,
        "viewers": 213
      },
      {
        "title": "Всемогущая функция Query — подробное руководство",
        "author": 1,
        "viewers": 213
      }
    ]

    return (

      <
      h1 > {
        blogs[0].title
      } <
      /h1>
    )

  }
}

ReactDOM.render( < App / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

Answer 2

您的状态数组称为blogs，但是您正在render方法中解构obj。

由于blogs[0]将是初始渲染的undefined，因此您需要先检查其设置，然后再尝试从中访问title属性。

示例

class App extends React.Component {
  state = {
    blogs: []
  };

  componentDidMount() {
    this.setState({
      blogs: [
        {
          title: "Всемогущая функция Query — подробное руководство",
          author: 1,
          viewers: 213
        },
        {
          title: "Всемогущая функция Query — подробное руководство",
          author: 1,
          viewers: 213
        }
      ]
    });
  }

  render() {
    const { blogs } = this.state;

    return <h1>{blogs[0] && blogs[0].title}</h1>;
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 3

在挂载后render之前第一次调用componentDidMount方法。因此，它将尝试从没有任何元素的初始状态读取blogs[0].title。我建议您重组渲染，使其看起来像：

return <h1>{blogs[0] && blogs[0].title}</h1>;

此外，如果以后需要整个数组，则可以执行以下操作：

return blogs.map((elem) => <h1 key={elem.title}>elem.title</h1>);

Answer 4

在blogs[0]之后添加问号。它对我有用。

要做：

<h1>{blogs[0]?.title}</h1>;

代替：

<h1>{blogs[0].title}</h1>;