时间戳

首页 > 解决方案 > 无法将状态数组值传递给 DOM

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

问题描述

我正在componentDidMount()使用 React 组件内部获取数据，并将该数据存储在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我得到一个错误。

标签： javascriptreactjsstate

解决方案

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

第二。通常，如果您有一个 react 数组，您将使用 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>
        );
    }

推荐阅读