React UseState钩子,无法连接数组

时间:2020-07-13 07:13:36

标签: javascript reactjs react-hooks use-state

尝试在反应中将两个数组加在一起时,我遇到一些奇怪的行为。 每个数组块的长度为50个项目。我的名单永远不会超过50。

我已经尝试了带有和不带有包装函数的传播运算符和concat方法。 没有任何作用

jobentley@Setups-MacBook-Pro Downloads % cd PGDSpider_2.1.1.5
jobentley@Setups-MacBook-Pro PGDSpider_2.1.1.5 % java -Xmx1024m -Xms512m -jar PGDSpider2.jar
java.lang.NoClassDefFoundError: org/w3c/dom/ls/DocumentLS
    at java.base/java.lang.ClassLoader.defineClass1(Native Method)
    at java.base/java.lang.ClassLoader.defineClass(ClassLoader.java:1017)
    at java.base/java.security.SecureClassLoader.defineClass(SecureClassLoader.java:151)
    at java.base/jdk.internal.loader.BuiltinClassLoader.defineClass(BuiltinClassLoader.java:821)
    at java.base/jdk.internal.loader.BuiltinClassLoader.findClassOnClassPathOrNull(BuiltinClassLoader.java:719)
    at java.base/jdk.internal.loader.BuiltinClassLoader.loadClassOrNull(BuiltinClassLoader.java:642)
    at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:600)
    at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
    at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
    at org.apache.xerces.jaxp.DocumentBuilderImpl.<init>(Unknown Source)
    at org.apache.xerces.jaxp.DocumentBuilderFactoryImpl.newDocumentBuilder(Unknown Source)
    at org.apache.log4j.xml.DOMConfigurator.doConfigure(DOMConfigurator.java:861)
    at org.apache.log4j.xml.DOMConfigurator.doConfigure(DOMConfigurator.java:773)
    at org.apache.log4j.xml.DOMConfigurator.configure(DOMConfigurator.java:901)
    at ch.unibe.iee.cmpg.pgdspider.PGDSpider.main(PGDSpider.java:17)
Caused by: java.lang.ClassNotFoundException: org.w3c.dom.ls.DocumentLS
    at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:602)
    at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:178)
    at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
    ... 15 more
setWordList(wordList => wordList.concat(msg))
setWordList(wordList => [...wordList, msg]) 
setWordList([...wordList, msg]) 
setWordList(wordList.concat(msg)) 

示例数据(数组长度= 50)

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

当前列表和传入数据从未连接在一起,新数据似乎已经替换了列表中的数据。 [{ 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"}] Console.log中的wordList返回一个空列表,无论是否有来自先前输入的数据。状态似乎不持久。 任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:2)

两个数组都需要散布,如下所示:

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

答案 1 :(得分:0)

如果你只想要一个包含连接项的数组,你可以使用:

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

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

但是,如果您希望拥有一组数组...那么您可能想要:

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

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