连接2个数组意外结果[重复]答案

【问题标题】：concatenating 2 arrays unexpected result [duplicate]连接2个数组意外结果[重复]
【发布时间】：2021-08-30 07:01:50
【问题描述】：

我正在尝试使用从 API 获取的记录列表来更新我的数组状态，我正在尝试如下：

  const [record, setRecord] = useState([])

  const addRecords= async ()=>{
     const apiResult = await apicall()

     setRecord(record.length ? [...apiResult, ...record] : apiResult)
}

但是，每次调用 api 时，都会用从 api 添加的最后一项覆盖我的“记录”，而不是将它们放在一起。

我也尝试使用 .concat() 得到相同的结果

const addRecords=async()=>{
   const apiResult = await apicall()

   setRecord(record.concat(apiResult ? apiResult:[])
}

这里有一些我无法理解的东西，希望有人能澄清它是什么。

【问题讨论】：

试试setRecord(record => [...apiResult, ...record])
你能展示更多你的代码吗？你是怎么调用 addRecords 的？
太棒了！，它现在可以工作了，非常感谢！，有趣的是我之前也尝试过 prevState 但没有传播数组，所以结果不能正常工作，再次感谢对于您的答案，它绝对可以按预期工作，您可以将其作为答案，以便我接受它，其他有相同问题的人会发现它更容易
您可能在useEffect 中有这段代码，它会覆盖最初的record。并且useEffect 不会在重新渲染时运行。本期：State not updating when using React state hook within setInterval

标签： javascript reactjs

【解决方案1】：

我认为你想在你的 setter 中使用一个函数来获取你以前的值（我不明白为什么要给你原因，但我认为这与你的记录是一两帧过时有关)

const addRecords=async()=>{
   const apiResult = await apicall()
   //prevRecord is more recent than record (I think)
    setRecord(prevRecord=>prevRecord.concat(apiResult || []) 
}

【讨论】：