Javascript Can'；t将状态数组值传递给DOM

我正在使用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>
        );
    }

在组件中，我试图从

state

中提取这些值，如下所示：

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

我不确定那

0

到底是从哪里来的

---

当我尝试

this.state.article.0.title时，首先出现了一个错误。
。只能通过括号表示法访问数组中的元素，因此它应该是.state.article[0].title

第二。通常，如果您在react中有一个数组，您可以使用array.map将数组转换为JSX对象的数组，并将其用大括号括起来。我将根据您的代码在下面提供一个示例。这允许你抓取所有的博客文章，并以可重复的方式进行布局。-如果您不想/不需要访问所有blogpost，那么我建议使用
.then（article=>this.setState（{article:article[0]}））
并完全放弃该数组

第三，您会注意到API调用发生在componentDidMount中，这意味着组件将在API调用返回和setState运行之前尝试访问state对象。因此，您需要将任何使用该状态位的代码放在一个条件后面，以防止出现错误。您可以使用
if（state.article[0]）
，或者检查长度，在react中，通常使用双符号AND来执行此操作，正如我在下面所做的那样

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>
        );
    }

class ArticlePrimaryContainer扩展组件{
构造函数（）{
超级（）；
此.state={
第[…]条，
}
}
componentDidMount（）{
获取（'/articles/0'）
.then（res=>res.json（））
.then（article=>this.setState（{article}，（）=>console.log（'article fetched..'，article））；
}
render（）{
返回(
{this.state.article.length>=1&&this.state.article.map（（项）=>{
返回(
{item.title}
{item.content}

)
})}
);
}
据我所知，你的代码基本上是正确的。也许可以看看JavaScript，因为你的
文章使用了JavaScript。如果你仍然有相应的更新，你的问题：）谢谢。我会继续检查这个答案，如果我能找出答案，我会正确标记。我尝试了
this.setState（{article[0]}）)
它说的是
语法错误：意外标记，应为，
此.setState（{article:0}））；
似乎没问题，不确定语法是否正确抱歉，更正，您想要
此.setState（{article:article[0]}）
很好，就是这样。谢谢。我仍在努力想这个问题。我想我会在接下来的几天里反复回答这个问题。
State
  article: Array[1]
    0: {…}
      content: "Content for article 1."
      title: "Article Title"

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>
        );
    }