javascript - React - Adding a property to an object inside of array in component's state - Stack Overflow

admin管理员组

文章数量:1406950

I am fetching an array of objects in the state, and I am trying to add a property to each of these objects.
The problem is I can see my property being added to each of the objects but when I mapping through all these objects and trying to console.log it I'm getting undefined

Adding a property

addFavourites() {
        let data = this.state.data.map((e) => {
            e.favourite = false;
            return e;
        });
        return data;
    }

state = {
        data: []
    }

addFavourites's called here:

getItem = () => {
        this.service
            .mergeData()
            .then((body) => {
                this.setState({
                    data: body
                },
                () => {
                    this.addFavourites();
                },
                () => {
                    this.dataToFilter();
                });
            });
    }

    ponentDidMount(){
        this.getItem();
    }

In render function I see all my objects including favourite

console.log(data.map((e) => e));

But this gives an array of undefined

console.log(data.map((e) => e.favourite));

How can I solve this?

I am fetching an array of objects in the state, and I am trying to add a property to each of these objects.
The problem is I can see my property being added to each of the objects but when I mapping through all these objects and trying to console.log it I'm getting undefined

Adding a property

addFavourites() {
        let data = this.state.data.map((e) => {
            e.favourite = false;
            return e;
        });
        return data;
    }

state = {
        data: []
    }

addFavourites's called here:

getItem = () => {
        this.service
            .mergeData()
            .then((body) => {
                this.setState({
                    data: body
                },
                () => {
                    this.addFavourites();
                },
                () => {
                    this.dataToFilter();
                });
            });
    }

    ponentDidMount(){
        this.getItem();
    }

In render function I see all my objects including favourite

console.log(data.map((e) => e));

But this gives an array of undefined

console.log(data.map((e) => e.favourite));

How can I solve this?

• javascript
• arrays
• json
• reactjs

Share Follow edited Aug 5, 2019 at 16:14 Gershon Papi 5,12633 gold badges2727 silver badges5151 bronze badges asked Aug 5, 2019 at 15:58 StanStan 13011 gold badge22 silver badges99 bronze badges 3

• Would you provide more code how addFavorite is called, when the state is saved, and where you are logging? – dance2die Commented Aug 5, 2019 at 16:01
• 1 I edit my code, is it ok? – Stan Commented Aug 5, 2019 at 16:04
• You call this.addFavourites(); but returned data from addFavourites() never get stored in any variable ? – Flo Commented Aug 5, 2019 at 16:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

First, wele! You should have probably made it more clear that this question is about React.

Now to the answer, every state modification would be made using setState, so your addFavourites function should be like this:

addFavourites() {
    let data = this.state.data.map((e) => {
        e.favourite = false;
        return e;
    });
    this.setState({ data: data });
}

本文标签： javascriptReactAdding a property to an object inside of array in component39s stateStack Overflow