React UseState钩子，无法连接数组

Posted 2023-02-14

【中文标题】React UseState钩子，无法连接数组

【英文标题】：React UseState hook, unable to concatenate arrays

【发布时间】：2020-11-02 08:32:57

【问题描述】：

我在尝试将两个数组添加在一起进行反应时遇到了一些奇怪的行为。 每个数组块的长度为 50 项。我的列表永远不会超过 50 个。

我已经尝试过使用扩展运算符和 concat 方法，有和没有包装函数。 没有任何作用

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)
   
  );

示例数据（数组长度 = 50）

[
definition: "1. aufhören zu leben, sein Leben beschließen↵Beispiele↵“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"]

当前列表和传入数据永远不会连接，新数据似乎已经替换了列表中的数据。 socket('word list in') 内的 wordList 的 Console.log 会返回一个空列表，无论是否有从前一个输入呈现的数据。不知何故，该状态似乎没有持续存在。 任何帮助将不胜感激。

【参考方案1】：

如果您只想要一个包含您将使用的串联项目的数组：

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

结果是：["banana", "orange", "apple", "..."];

但是，如果您希望拥有一个数组数组......那么您会想要：

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

那么结果将是：[[...array1],[...array2],[...whatever]];

【参考方案2】：

两个数组都需要展开，像这样：

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

【讨论】：

是我还是我们因为太多的 javascript 而习惯了这种可怕的东西？我从没想过这种行为会出现在任何其他语言中，并且在我看到这个的第二次就会放弃那种语言，只是网络把我们都迷上了 JS ????