当我在链接之间切换并根据标签值获取数据时，如何设置父组件的状态

Question

Task is to fetch data from api when toggle between tags

When click on the link it calls the api service but state of feeds is not updated but it throws below warning

jQuery.Deferred exception: Cannot read property 'setState' of undefined TypeError: Cannot read property 'setState' of undefined

My github repo

https://github.com/dolphine4u/demo-app

APP component

import React from 'react';
import {FetchData} from "../service/flickerApi.service";
import Header from "./header/header.component";
import Navigation from "./navigation/navigation.component";
import ProductList from "./products/products.component";
import Footer from "./footer/footer.component";


class App extends React.Component {

    constructor() {
        super()
        this.state = {
            feeds: [],
            favorites:[]
        };

        this.addToFavorites = this.addToFavorites.bind(this);
    }

    handleChange( value ) {
        this.setState( { feeds: value })
    }

    addToFavorites(id) {
        const {feeds ,favorites} = this.state;
        const findId = feeds.filter(item => {
            return item.id === id;
        })

        favorites.push(findId)
        console.log(favorites)
      // localStorage.setItem('favorite', JSON.stringify(this.state.favorites));
        this.setState({
            feeds: favorites
        });


    }


   /* componentWillMount(){
        let LoadFeeds =  localStorage.getItem('FlickerFeeds');

        LoadFeeds && this.setState({
            feeds: JSON.parse(LoadFeeds)
        })
    }*/

    componentDidMount() {
        FetchData.call(this);
    }


   /* componentWillUpdate(nextprops, nextState){
        localStorage.setItem('FlickerFeeds', JSON.stringify(nextState.feeds))
    }
*/
    render() {
        const {feeds} = this.state;
        const productList = feeds.map((item,index) => {
            return <ProductList
                key={index}
                title={item.title}
                image={item.src}
                id={item.id}
                author={item.author}
                date={item.created}
                update={this.addToFavorites}
            />
        })

        return ([
            <Header key="header"/>,

            <Navigation key="navigation" />,

            <section key="productList">
                <div className="container">
                    <div className="row row-eq-height">
                        {productList}
                    </div>
                </div>
            </section>,

            <Footer key="footer"/>
        ]);
    }

}

export default App;

Navigation component

import React from 'react';
import Link from "./link.component";
import './navigation.css';

class Navigation extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tags: [
                {tag:"kittens"},
                {tag:"dogs"},
                {tag:"lion"},
                {tag:"tiger"},
                {tag:"leapord"}]
        };
    }

    render() {
        const {tags} = this.state;
        const tagList = tags.map(item => {
            return <Link
                key={item.tag}
                tag={item.tag}
            />
        })
        return (
            <nav className="nav">
                <div className="container">
                    <ul className="nav-bar">
                        {tagList}
                    </ul>
                </div>
            </nav>
        );
    }
}

export default Navigation;

Link Component

import React from 'react';
import {FetchData} from "../../service/flickerApi.service";

class Link extends React.Component {
    constructor(props) {
        super(props)
        this.onClick = this.onClick.bind(this);
    }
    onClick(e) {
        FetchData(this.props.tag);
    }

    render() {
        return (
            <li><a href="#" onClick={this.onClick}>{this.props.tag}</a></li>

        );
    }
}

export default Link;

product component

import React from 'react';
import './product.css';

class ProductList extends React.Component {
    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);
    }

    onClick(e) {
        this.props.update(this.props.id);
    }

    render() {
        return (
            <div className="product-column">
                <div className="product-item">
                    <div className="product-content">
                        <div className="product-author">
                            <strong>Author: </strong>{this.props.author}
                        </div>
                        {/*<div className="product-image" style={{backgroundImage: "url(" + this.props.image + ")"}}/>*/}
                    </div>
                    <div className="product-content">
                        <div className="product-date">
                            Created Date: {this.props.date}
                        </div>
                        <h3 className="product-title">{this.props.title}</h3>
                        <button className="product-btn" onClick={this.onClick}>
                            Add to Favourites
                        </button>
                    </div>
                </div>
                {/*<div className="product-description" dangerouslySetInnerHTML={{__html: this.props.description}}>
                        </div>*/}
            </div>

        );
    }
}

export default ProductList;

Api service

import $ from "jquery";
import {getLastPartOfUrl, formatDate, removeUrl, getString} from "../helpers/helper";

export function FetchData(tag) {

    const URL = "https://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=?"
    const SUFFIX_SMALL_240 = "_m";
    const SUFFIX_SMALL_320 = "_n";
     $.getJSON({
        url : URL,
         data: {
             tags: tag
         }
     })
        .then(response => {
            let list= response.items.map(item => ({
                title: removeUrl(item.title),
                id: getLastPartOfUrl(item.link),
                description: item.description,
                link: item.link,
                src: item.media.m.replace(SUFFIX_SMALL_240, SUFFIX_SMALL_320),
                author: getString(item.author),
                created: formatDate(item.published),
                tags: item.tags,
                fav: false
            }));

            this.setState({
                feeds: list
            })

        }).catch(function(error){
            console.log(error);
     });
}

Answer 1

You're trying to call this.addToFavorites from a click handler that is not even bound to this . I think two changes are needed for this to work:

1. In App component, change the addFavorites function to an arrow function so it gets the context this :

    addToFavorites = id => { ... 

2. Same in ProductList component for the click handler:

    onClick = () => { this.props.update(this.props.id); }