Question

我正在使用React组件中的componentDidMount()获取数据，并将该数据存储在this.state中。

我似乎无法将状态数组中的数据获取到DOM中。

以下是组件：

class ArticlePrimaryContainer extends Component {
    constructor() {
        super();

        this.state = {
            article: [],
        }
    }

    componentDidMount() {
        fetch('/articles/0')
            .then(res => res.json())
            .then(article => this.setState({article}, () => console.log('Article fetched..', article)));
    }

    render() {
        return(
            <div className="article-primary-container">
                <div className="article-primary-container-image"></div>
                <div className="article-primary-container-content">
                        <h2 className="article-primary-container-heading">{this.state.article.title}</h2>
                        <p className="article-primary-container-paragraph">{this.state.article.content}</p>
                    </div>
                <div className="article-primary-container-content-overlay"></div>
            </div>
        );
    }

我正在从一个明确的index.js文件中提取此数据：

const express = require('express');

const app = express();

app.get('/articles/0', (req, res) => {
    const article = [
        { title: 'Article Title', content: 'Content for article 1.' },
    ];

    res.json(article);
});

const port = 5000;

app.listen(port, () => `Server running on port ${port}`);

在该组件中，我试图通过以下方式从state中提取这些值：

<h2 className="article-primary-container-heading">{this.state.article.title}</h2>

这不起作用。当我在浏览器控制台中检查React标签时，状态数组如下所示：

State
  article: Array[1]
    0: {…}
      content: "Content for article 1."
      title: "Article Title"

我不确定0的确切来源。

当我尝试this.state.article.0.title时遇到错误。

Answer 1

第一。您只能通过括号表示法访问数组中的元素，因此它将为this.state.article [0] .title

秒。通常，如果您有一个反应数组，则可以使用Array.map将您的数组转换为JSX对象数组，并将其包装在花括号中。我将在下面根据您的代码提供一个示例。这样您就可以抓取所有博客文章，并以可重复的方式对其进行布局。 -如果您不想/不需要访问所有博客文章，那么我建议使用.then(article => this.setState({article: article[0]}));并完全抛弃该数组。

第三，您会注意到API调用正在componentDidMount中进行，这意味着该组件将在API调用返回并运行setState之前尝试访问状态对象。因此，您需要将使用该状态位的所有代码置于条件后面，以防止发生错误。您可以在反应中使用if(state.article[0])或长度检查，就像我在下面所做的那样，通常使用双与号来完成此操作。

class ArticlePrimaryContainer extends Component {
    constructor() {
        super();

        this.state = {
            article: [],
        }
    }

    componentDidMount() {
        fetch('/articles/0')
            .then(res => res.json())
            .then(article => this.setState({article}, () => console.log('Article fetched..', article)));
    }

    render() {
        return(
            <div className="article-primary-container">
                <div className="article-primary-container-image"></div>
                {this.state.article.length >= 1 && this.state.article.map((item)=>{
                    return(
                        <div>
                            <h2>{item.title}</h2>
                            <p>{item.content}</p>
                        </div>
                    )
                })}
                <div className="article-primary-container-content-overlay"></div>
            </div>
        );
    }

无法将状态数组值传递给DOM

1 个答案: