Javascript 在ReactJS中的组件之间传递数据时出错

我试图将状态数组从一个组件传递到另一个组件，以共享和显示数据。因此，数据来自一个RESTAPI，它被保存到一个名为

saved[]

的数组中。我正在尝试将其传递到另一个组件以显示保存的文章。我有几个问题：

1-其他组件中未显示任何数据 2-在路由之间切换时，我遇到以下错误：

warning: Can't perform a React state update on an unmounted component.

因此，我的代码如下：

newshiro.js

import React, { Component } from 'react';
import './news-hero.css';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

const responsive = {
    superLargeDesktop: {
        breakpoint: { max: 4000, min: 3000 },
        items: 1,
    },
    desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 1,
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 1,
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
    },
};

class NewsHero extends Component {
    state = {
        loading: false,
        data: [],
        headline: [],
        saved: []
    }

    saved = headline => {
        this.setState(
         (prevState) => ({ saved: [...prevState.saved, headline] }),
          () => {
            console.log('Saved articles = ', this.state.saved);
            alert('Article saved');
            localStorage.setItem('saved', JSON.stringify(this.state.saved));
            localStorage.getItem('saved');
          });
      }

    constructor(props) {
        super(props)
        this.saved = this.saved.bind(this)
    }

    onError() {
        this.setState({
            imageUrl: "../assets/img-error.jpg"
        })
    }

    componentDidMount() {
        this.setState({ loading: true, saved: localStorage.getItem('saved') ? JSON.parse(localStorage.getItem('saved')) : [] })
        fetch('https://newsapi.org/v2/everything?q=timbaland&domains=rollingstone.com,billboard.com&excludeDomains=townsquare.media&apiKey=8')
            .then(headline => headline.json())
            .then(headline => this.setState({ headline: headline.articles, loading: false }, () => console.log(headline.articles)))
    }

    render() {

        return (
            <div className="hero">
                <h2 className="text-left">News</h2>

                {this.state.loading
                    ? "loading..."
                    : <div>
                        <Carousel
                            additionalTransfrom={0}
                            showDots={true}
                            arrows={true}
                            autoPlaySpeed={3000}
                            autoPlay={false}
                            centerMode={false}
                            className="carousel-hero"
                            containerClass="container-with-dots"
                            dotListClass="dots"
                            draggable
                            focusOnSelect={false}
                            infinite
                            itemClass="carousel-top"
                            keyBoardControl
                            minimumTouchDrag={80}
                            renderButtonGroupOutside={false}
                            renderDotsOutside
                            responsive={responsive}>
                            {this.state.headline.map((post, indx) => {
                                return (
                                    <div className="text-left mt-5" key={indx}>
                                        <img className="media-img card-img-top card-img-hero" src={post.urlToImage} alt="Alt text"></img>
                                        <div className="card-body container hero-text-body">
                                            <h1 className="card-title hero-title text-truncate">{post.title}</h1>
                                            <button className="btn-primary btn mt-2 mb-4" onClick={() => this.saved(post)}>Add this article</button>
                                            <p className="card-text">{post.description}</p>
                                            <a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
                                        </div>
                                    </div>
                                )
                            })}
                        </Carousel>
                    </div>
                }
            </div>
        )
    }
}
export default NewsHero;

import React, { Component } from 'react';
import '../news-main/news-main.css';
import News from '../news/news';
import NewsHero from '../news-hero/news-hero';
import Sports from '../sports/sports';

class NewsMain extends Component {
    render() {
        return (
            <div>
                <NewsHero />
                <News />
                <Sports />
            </div>
        )
    }
}
export default NewsMain;

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import Header from './header/header';
import NewsMain from './news-main/news-main';
import Footer from './footer/footer';
import Home from './home/home';
import { Router } from '@reach/router';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {saved: []};
  }
  render() {
    return (
      <div className="App">
        <Header />
        <div>
          <Router>
            <Home default path='/news' savedArticles={this.state.saved} />
            <NewsMain path='/news' />
          </Router>
        </div>
        <Footer title="Footer" />
      </div>
    )
  }
}
export default App;

import React，{Component}来自'React'；
导入“/news hero.css”；
从“react multi Carousel”导入转盘；
导入“react multi carousel/lib/styles.css”；
常数响应={
超大桌面：{
断点：{max:4000，min:3000}，
项目：1，
},
桌面：{
断点：{max:3000，min:1024}，
项目：1，
},
平板电脑：{
断点：{max:1024，min:464}，
项目：1，
},
流动电话：{
断点：{max:464，min:0}，
项目：1，
},
};
类NewsHero扩展组件{
状态={
加载：false，
数据：[]，
标题：[]，
已保存：[]
}
已保存=标题=>{
这是我的国家(
（prevState）=>（{saved:[…prevState.saved，headline]}），
() => {
console.log（'Saved articles='，this.state.Saved）；
警报（“物品已保存”）；
localStorage.setItem（'saved'，JSON.stringify（this.state.saved））；
localStorage.getItem（'saved'）；
});
}
建造师（道具）{
超级（道具）
this.saved=this.saved.bind（this）
}
onError（）{
这是我的国家({
imageUrl:“../assets/img error.jpg”
})
}
componentDidMount（）{
this.setState（{加载：true，保存：localStorage.getItem（'saved'）？JSON.parse（localStorage.getItem（'saved'））：[]））
取（'https://newsapi.org/v2/everything?q=timbaland&domains=rollingstone.com，billboard.com&excludeddomains=townsquare.media&apiKey=8'）
.then（headline=>headline.json（））
.then（headline=>this.setState（{headline:headline.articles，load:false}，（）=>console.log（headline.articles）））
}
render（）{
返回(
新闻
{this.state.loading
“装载…”
: 
{this.state.headline.map（（post，indx）=>{
返回(
{post.title}
this.saved（post）}>添加本文
{post.description}
)
})}
}
)
}
}
导出默认新闻英雄；

main news.js

import React, { Component } from 'react';
import './news-hero.css';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

const responsive = {
    superLargeDesktop: {
        breakpoint: { max: 4000, min: 3000 },
        items: 1,
    },
    desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 1,
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 1,
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
    },
};

class NewsHero extends Component {
    state = {
        loading: false,
        data: [],
        headline: [],
        saved: []
    }

    saved = headline => {
        this.setState(
         (prevState) => ({ saved: [...prevState.saved, headline] }),
          () => {
            console.log('Saved articles = ', this.state.saved);
            alert('Article saved');
            localStorage.setItem('saved', JSON.stringify(this.state.saved));
            localStorage.getItem('saved');
          });
      }

    constructor(props) {
        super(props)
        this.saved = this.saved.bind(this)
    }

    onError() {
        this.setState({
            imageUrl: "../assets/img-error.jpg"
        })
    }

    componentDidMount() {
        this.setState({ loading: true, saved: localStorage.getItem('saved') ? JSON.parse(localStorage.getItem('saved')) : [] })
        fetch('https://newsapi.org/v2/everything?q=timbaland&domains=rollingstone.com,billboard.com&excludeDomains=townsquare.media&apiKey=8')
            .then(headline => headline.json())
            .then(headline => this.setState({ headline: headline.articles, loading: false }, () => console.log(headline.articles)))
    }

    render() {

        return (
            <div className="hero">
                <h2 className="text-left">News</h2>

                {this.state.loading
                    ? "loading..."
                    : <div>
                        <Carousel
                            additionalTransfrom={0}
                            showDots={true}
                            arrows={true}
                            autoPlaySpeed={3000}
                            autoPlay={false}
                            centerMode={false}
                            className="carousel-hero"
                            containerClass="container-with-dots"
                            dotListClass="dots"
                            draggable
                            focusOnSelect={false}
                            infinite
                            itemClass="carousel-top"
                            keyBoardControl
                            minimumTouchDrag={80}
                            renderButtonGroupOutside={false}
                            renderDotsOutside
                            responsive={responsive}>
                            {this.state.headline.map((post, indx) => {
                                return (
                                    <div className="text-left mt-5" key={indx}>
                                        <img className="media-img card-img-top card-img-hero" src={post.urlToImage} alt="Alt text"></img>
                                        <div className="card-body container hero-text-body">
                                            <h1 className="card-title hero-title text-truncate">{post.title}</h1>
                                            <button className="btn-primary btn mt-2 mb-4" onClick={() => this.saved(post)}>Add this article</button>
                                            <p className="card-text">{post.description}</p>
                                            <a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
                                        </div>
                                    </div>
                                )
                            })}
                        </Carousel>
                    </div>
                }
            </div>
        )
    }
}
export default NewsHero;

import React, { Component } from 'react';
import '../news-main/news-main.css';
import News from '../news/news';
import NewsHero from '../news-hero/news-hero';
import Sports from '../sports/sports';

class NewsMain extends Component {
    render() {
        return (
            <div>
                <NewsHero />
                <News />
                <Sports />
            </div>
        )
    }
}
export default NewsMain;

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import Header from './header/header';
import NewsMain from './news-main/news-main';
import Footer from './footer/footer';
import Home from './home/home';
import { Router } from '@reach/router';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {saved: []};
  }
  render() {
    return (
      <div className="App">
        <Header />
        <div>
          <Router>
            <Home default path='/news' savedArticles={this.state.saved} />
            <NewsMain path='/news' />
          </Router>
        </div>
        <Footer title="Footer" />
      </div>
    )
  }
}
export default App;

import React，{Component}来自'React'；
导入“../news main/news main.css”；
从“../News/News”导入新闻；
从“../news hero/news hero”导入新闻英雄；
从“../Sports/Sports”导入运动；
类NewsMain扩展组件{
render（）{
返回(
)
}
}
导出默认新闻主目录；

app.js

import React, { Component } from 'react';
import './news-hero.css';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";

const responsive = {
    superLargeDesktop: {
        breakpoint: { max: 4000, min: 3000 },
        items: 1,
    },
    desktop: {
        breakpoint: { max: 3000, min: 1024 },
        items: 1,
    },
    tablet: {
        breakpoint: { max: 1024, min: 464 },
        items: 1,
    },
    mobile: {
        breakpoint: { max: 464, min: 0 },
        items: 1,
    },
};

class NewsHero extends Component {
    state = {
        loading: false,
        data: [],
        headline: [],
        saved: []
    }

    saved = headline => {
        this.setState(
         (prevState) => ({ saved: [...prevState.saved, headline] }),
          () => {
            console.log('Saved articles = ', this.state.saved);
            alert('Article saved');
            localStorage.setItem('saved', JSON.stringify(this.state.saved));
            localStorage.getItem('saved');
          });
      }

    constructor(props) {
        super(props)
        this.saved = this.saved.bind(this)
    }

    onError() {
        this.setState({
            imageUrl: "../assets/img-error.jpg"
        })
    }

    componentDidMount() {
        this.setState({ loading: true, saved: localStorage.getItem('saved') ? JSON.parse(localStorage.getItem('saved')) : [] })
        fetch('https://newsapi.org/v2/everything?q=timbaland&domains=rollingstone.com,billboard.com&excludeDomains=townsquare.media&apiKey=8')
            .then(headline => headline.json())
            .then(headline => this.setState({ headline: headline.articles, loading: false }, () => console.log(headline.articles)))
    }

    render() {

        return (
            <div className="hero">
                <h2 className="text-left">News</h2>

                {this.state.loading
                    ? "loading..."
                    : <div>
                        <Carousel
                            additionalTransfrom={0}
                            showDots={true}
                            arrows={true}
                            autoPlaySpeed={3000}
                            autoPlay={false}
                            centerMode={false}
                            className="carousel-hero"
                            containerClass="container-with-dots"
                            dotListClass="dots"
                            draggable
                            focusOnSelect={false}
                            infinite
                            itemClass="carousel-top"
                            keyBoardControl
                            minimumTouchDrag={80}
                            renderButtonGroupOutside={false}
                            renderDotsOutside
                            responsive={responsive}>
                            {this.state.headline.map((post, indx) => {
                                return (
                                    <div className="text-left mt-5" key={indx}>
                                        <img className="media-img card-img-top card-img-hero" src={post.urlToImage} alt="Alt text"></img>
                                        <div className="card-body container hero-text-body">
                                            <h1 className="card-title hero-title text-truncate">{post.title}</h1>
                                            <button className="btn-primary btn mt-2 mb-4" onClick={() => this.saved(post)}>Add this article</button>
                                            <p className="card-text">{post.description}</p>
                                            <a href={post.url} target="_blank" rel="noopener noreferrer">Read More</a>
                                        </div>
                                    </div>
                                )
                            })}
                        </Carousel>
                    </div>
                }
            </div>
        )
    }
}
export default NewsHero;

import React, { Component } from 'react';
import '../news-main/news-main.css';
import News from '../news/news';
import NewsHero from '../news-hero/news-hero';
import Sports from '../sports/sports';

class NewsMain extends Component {
    render() {
        return (
            <div>
                <NewsHero />
                <News />
                <Sports />
            </div>
        )
    }
}
export default NewsMain;

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import Header from './header/header';
import NewsMain from './news-main/news-main';
import Footer from './footer/footer';
import Home from './home/home';
import { Router } from '@reach/router';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {saved: []};
  }
  render() {
    return (
      <div className="App">
        <Header />
        <div>
          <Router>
            <Home default path='/news' savedArticles={this.state.saved} />
            <NewsMain path='/news' />
          </Router>
        </div>
        <Footer title="Footer" />
      </div>
    )
  }
}
export default App;

import React，{Component}来自'React'；
//从“/logo.svg”导入徽标；
导入“/App.css”；
从“./Header/Header”导入标题；
从“./news main/news main”导入NewsMain；
从“./Footer/Footer”导入页脚；
从“./Home/Home”导入主页；
从'@reach/Router'导入{Router}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={saved:[]}；
}
render（）{
返回(
)
}
}
导出默认应用程序；

正在尝试将数据传递到以下位置：

import React, { Component } from 'react';
import '../home/home.css';

class Home extends Component {

    componentDidMount() {
        this.setState({ loading: true, saved: localStorage.getItem('saved') ? JSON.parse(localStorage.getItem('saved')) : [] })
        fetch('https://newsapi.org/v2/everything?q=timbaland&domains=rollingstone.com,billboard.com&excludeDomains=townsquare.media&apiKey=8')
            .then(headline => headline.json())
            .then(headline => this.setState({ headline: headline.articles, loading: false }, () => console.log('Saved articles', headline.articles)))
    }

    render() {
        return (
            <div className="mt-5 saved">
                {this.props.savedArticles.map((article, indx) => {
                    return (
                        <div className="media mb-5" key={indx}>
                            <img className="media-img sports-thumb mr-3 mb-3 d-none d-sm-block" src={article.urlToImage} alt="Alt text"></img>
                            <div className="media-body text-left">
                                <h5 className="mt-0">{article.title}</h5>
                                <p className="text-left">{article.description}</p>
                                <a href={article.url} target="_blank" rel="noopener noreferrer">Read More</a>
                            </div>
                        </div>
                    )
                })}
            </div>
        )
    }
}
export default Home;

import React，{Component}来自'React'；
导入“../home/home.css”；
类Home扩展组件{
componentDidMount（）{
this.setState（{加载：true，保存：localStorage.getItem（'saved'）？JSON.parse（localStorage.getItem（'saved'））：[]））
取（'https://newsapi.org/v2/everything?q=timbaland&domains=rollingstone.com，billboard.com&excludeddomains=townsquare.media&apiKey=8'）
.then（headline=>headline.json（））
.then（headline=>this.setState（{headline:headline.articles，load:false}，（）=>console.log（'Saved articles'，headline.articles）））
}
render（）{
返回(
{this.props.savedArticles.map（（article，indx）=>{
返回(
{文章标题}
{article.description}
)
})}
)
}
}
导出默认主页；

---

与国家有关，但我不知道在哪里，为什么？任何想法的

我看到有几个地方保存了一个

数组，你能在这里解释一下组件之间的关系吗？i、 e.哪一个获取数据，然后将数据传递到哪里？newshero.js是获取数据并将保存的文章存储在
saved[]
数组中的。我想将保存的[]数组传递给其他组件，在上面的情况下，
home
componentState不应该真正进入ba状态