React函数在正确结果之上返回未定义

Question

I have a function that is looping over one array, comparing it with the results in another and on finding a matching result, adds the matches to a new array, addToState and concatenates these results with the original array having changed the shelf value ready to be rendered.

All well and good.

The problem I have is that for some reason the addToState array as well as having the two correct results has a further 18 values of undefined .

Why are these being added in and what can I do to prevent this?

My function:

updateExistingShelves(searchResults) {
        const books = this.props.books
        const addToState = searchResults.map((result) => books.find(b => {
          if(b.id === result.id) {
            result.shelf = b.shelf
            return result
          }
        }))
        console.log(addToState) 
        books.concat(addToState)
        return searchResults
     }

addToState end value:

(20) [{…}, {…}, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
0
:
{title: "The Hatred of Poetry", authors: Array(1), publisher: "FSG Originals", publishedDate: "2016-06-07", description: "No art has been denounced as often as poetry. It's… vocation no less essential for being impossible.", …}
1
:
{title: "A Poetry Handbook", authors: Array(1), publisher: "Houghton Mifflin Harcourt", publishedDate: "1994", description: "Offers advice on reading and writing poetry, and d… verse, diction, imagery, revision, and workshops", …}
2
:
undefined
3
:
undefined
4
:
undefined
5
:
undefined
6
:
undefined
7
:
undefined
8
:
undefined
9
:
undefined
10
:
undefined
11
:
undefined
12
:
undefined
13
:
undefined
14
:
undefined
15
:
undefined
16
:
undefined
17
:
undefined
18
:
undefined
19
:
undefined
length
:
20

Answer 1

You can use a variable with a greated scope and save the found items into it and use forEach intead of map for this.

 updateExistingShelves(searchResults) {
        const books = this.props.books;
        let filteredResult=[];
        searchResults.forEach((result) => books.find(b => {
          if(b.id === result.id) {
            let temp = {...result};
            temp.shelf = b.shelf
            filteredResult.push(temp)
          }
        }))
        console.log(filteredResult) 
        books.concat(filteredResult)
        return searchResults
     }