Javascript 在React类之间传递数据不会'；行不通

我试图在类之间传递数据，但它不起作用。错误显示： “无法读取未定义的属性“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}来自'React'；
从“./components/ArticlePage”导入ArticlePage；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文章：''，
newArticleList:[]
}
}
componentDidMount（）{
取（'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=>{
返回(
[{image:article._embedded['wp:featuredmedia']['0'].source\u url}
)
})})
}
}
render（）{
返回(
);
}
}
导出默认应用程序；

这是我试图转发给的班级：

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;

import React，{Component}来自'React'；
类ArticlePage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
}
}
render（）{
返回(
{ 
this.props.allArticles.map（（文章，索引）=>{
返回(
)
})
}
)
}
}
导出默认文章页面；

在进行映射之前，您需要添加条件检查。这里所有的项目最初都是未定义的。另外，在循环中生成jsx元素时，请尝试将数据中的id添加为键。如果您没有为数组数据中的每个对象生成唯一的id，请使用索引作为键，就像我在下面所做的那样

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

{
this.props.allArticles&&this.props.allArticles.map（（文章，索引）=>{
返回(
)
})
}

---

如果您想知道向jsx元素添加键的不同方法，您可以参考

，您需要在执行映射之前添加条件检查。这里所有的项目最初都是未定义的。另外，关于键，在循环中生成jsx元素时，请尝试将数据中的id添加为键。如果在他将数组数据用作索引，就像我在下面所做的那样

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

{
this.props.allArticles&&this.props.allArticles.map（（文章，索引）=>{
返回(
)
})
}

---

如果您想知道向jsx元素添加键的不同方法，可以参考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;

class ArticlePage扩展组件{
静态defaultProps={
所有物品：[]
}
建造师（道具）{
超级（道具）；
此.state={
}
}
render（）{
返回(
{ 
this.props.allArticles.map（（文章，索引）=>{
返回(
)
})
}
)
}
}
导出默认文章页面；

在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;

class ArticlePage扩展组件{
静态defaultProps={
所有物品：[]
}
建造师（道具）{
超级（道具）；
此.state={
}
}
render（）{
返回(
{ 
this.props.allArticles.map（（文章，索引）=>{
返回(
)
})
}
)
}
}
导出默认文章页面；

尝试在ArticlePage中使用空数组

[]

。问题是在实例化时未定义道具，导致该错误。或者执行条件呈现。尝试使用空数组

[]

在ArticlePage中。问题是在实例化时未定义道具，导致该错误。或者执行条件呈现。非常感谢，它可以工作！但是为什么我是console.log（this.props.allArticles）它执行完整列表，然后用空列表执行另一次执行？因为应用程序内组件newArticleList最初是一个空数组。关于添加键，请查看我在回答中添加的线程。这有不同的解决方案，可以帮助您了解更多有关添加键的信息。它不会给我错误，但它是一个空数组所以我不能真正使用它。你有没有其他的想法？谢谢，阿加尼就是没办法。对于我的其他组件，它工作得非常好。谢谢，它工作得非常好！但是为什么我是console.log（this.props.allArticles）它执行完整列表，然后用空列表执行另一次执行？因为应用程序内组件newArticleList最初是一个空数组。关于添加键，请查看我在回答中添加的线程。这有不同的解决方案，可以帮助您了解更多有关添加键的信息。它不会给我错误，但它是一个空数组所以我真的不能用它，你知道吗