React Hook UseState, impossible de concaténer des tableaux

Question

Je rencontre un comportement étrange lorsque j'essaie d'ajouter deux tableaux ensemble en réagissant. Chaque fragment de tableau a une longueur de 50 éléments. Ma liste ne dépasse jamais 50.

J'ai essayé à la fois avec l'opérateur de propagation et la méthode concat, avec et sans fonctions d'enrobage. rien ne fonctionne

setWordList(wordList => wordList.concat(msg))
setWordList(wordList => [...wordList, msg]) 
setWordList([...wordList, msg]) 
setWordList(wordList.concat(msg)) 

const [wordList, setWordList] = useState([])
const [isSearching, setIsSearching] = useState(true)

const loadMoreList = (data) => {
  console.log(data)
  setIsSearching(true)
  let already = []
  for(let i = 0; i < wordList.length; i++){
    already.push({_id: wordList[i]._id})
  }
  console.log(already)
  socket.current.emit('get word list more', {filter: data.filter, already: already});
}

socket.current.on('word list in', (msg) => {

setWordList(wordList => [...wordList, msg])

console.log(msg)
setIsSearching(false)

});

Exemple de données (longueur du tableau = 50)

[{
definition: "1. aufhören zu leben, sein Leben beschließenBeispiele“jung sterben”Wendungen, Redensarten, Sprichwörter“zum Sterben langweilig, müde, einsam o. Ä...."
id: "dfe03030-0c50-11ea-afa4-098be982e090"
leitner_no: 2
priority: true
priority_time: 1587986213134
reviews: 1
source: "manual"
source_details: "none"
time_stamp: 1583402873665
word: "sterben  | starb, gestorben |"
_id: "fb99b7c3-34a4-4e63-a98e-41efbbcfe5fc"}]

La liste actuelle et les données entrantes ne se concatènent jamais, les nouvelles données semblent remplacer celles déjà présentes dans la liste. Console.log de wordList dans socket('word list in') retourne une liste vide, que des données aient été rendues à partir de l'entrée précédente ou non. De quelque manière, l'état semble ne pas persister. Toute aide serait grandement appréciée.

Answer 1

Les deux tableaux doivent être étalés, comme ceci :

setWordList(wordList => [...wordList, ...msg])

Answer 2

Si vous voulez simplement un seul tableau avec les éléments concaténés, vous utiliseriez :

setWordList(wordList => [...wordList, ...msg])

et le résultat serait : ["banana", "orange", "apple", "..."];

Cependant, si vous cherchiez à avoir un tableau de tableaux... alors vous voudriez :

setWordList(wordList => [...wordList, msg])

Ensuite, le résultat serait : [[...array1],[...array2],[...whatever]];