Question

我正在尝试在类之间传递数据，但它不起作用。错误提示： “无法读取未定义的属性'map'” （我需要它来维持将来的状态）。 我试图在不同的组件（不是类）中使用它，并且它可以工作。

这是我的第一堂课：

import React, { Component } from 'react';
import ArticlePage from './components/articlePage';
import './App.css';

class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        articles: '',
        newArticleList: []
      }
    }

componentDidMount(){
  fetch('https://example.com/wpjson/wp/v2/od_article_embed&page=1&per_page=10')
  .then(response => response.json())
  .then(myJson => this.setState({articles: myJson.map(articleName => articleName )}))
}

componentDidUpdate(prevProps, prevState) {
  if (this.state.articles !== prevState.articles) {
    this.setState({newArticleList: this.state.articles.map(article => {
      return (
          [{image: article._embedded['wp:featuredmedia']['0'].source_url}
      )
    })})
  }
}

render() {    
    return (
        <div className="App">
            <ArticlePage 
              allArticles={this.state.newArticleList}/>
        </div>
    );
  }
}

export default App;

这是我正在尝试将其转发给的课程：

import React, {Component} from 'react';

class ArticlePage extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

render() {
    return (
        <div className='articlePage'>
                    { 
                        this.props.allArticles.map((article,index) => {
                            return (
                                <div key={index} className="articlePage__section-content-right-trending">
                                    <img className="articlePage__section-content-right-trending-image" alt="article" src={`${article[0].image}`}/>                                            
                                </div>
                            )
                        })
                    }
        </div>
    )
}
}


export default ArticlePage;

Answer 1

在制作地图之前，您需要添加条件检查。在这里，所有Articles最初都是不确定的。另外，关于密钥，请在循环生成jsx元素时尝试将数据中的ID作为密钥添加。如果您没有为数组数据中的每个对象生成唯一的ID，则将index用作键，就像我在下面所做的那样

 { 
    this.props.allArticles && this.props.allArticles.map((article,index) => {
          return (
               <div key={`Key${index}`} className="articlePage__section-content-right-trending">
                   <img className="articlePage__section-content-right-trending-image" alt="article" src={`${article[0].image}`}/>                                            
               </div>
          )
     })
 }

如果您想了解向jsx元素添加密钥的不同方法，可以参考here

Answer 2

在ArticlePage组件中，您可以设置defaultProps

class ArticlePage extends Component {
    static defaultProps = {
       allArticles: []
    }
    constructor(props) {
        super(props);
        this.state = {

        }
    }

render() {
    return (
        <div className='articlePage'>
                    { 
                        this.props.allArticles.map((article,index) => {
                            return (
                                <div key={index} className="articlePage__section-content-right-trending">
                                    <img className="articlePage__section-content-right-trending-image" alt="article" src={`${article[0].image}`}/>                                            
                                </div>
                            )
                        })
                    }
        </div>
    )
}
}


export default ArticlePage;

在React类之间传递数据不起作用

2 个答案: