React Native 在拼接或推入數組后不會重新渲染組件

Question

我有如下代碼

const array = [  {
    _id: 5e45652ad75f432c79622f17,
    owner: '5e44ed54acebcc2102da5244',
    videoID: '',
    totalTime: 60,
    totalView: 100,
  },
  {
    _id: 5e45652dd75f432c79622f18,
    owner: '5e44ed54acebcc2102da5244',
    videoID: '',
    totalTime: 60,
    totalView: 100,
  },
  {
    _id: 5e45652ed75f432c79622f19,
    owner: '5e44ed54acebcc2102da5244',
    videoID: '',
    totalTime: 60,
    totalView: 100,
  }
]
const [CurrentListVideo, onChangeCurrentListVideo] = React.useState(array);
function spliceOneItem(){
  console.log('before splice',CurrentListVideo)//3 item
  CurrentListVideo.splice(0,1)
  console.log('after splice',CurrentListVideo)//2 item
  onChangeCurrentListVideo(CurrentListVideo)//then i call this
}

以及 return() 中的一些代碼，如下所示

 <TouchableOpacity onPress={spliceOneItem} style={styles.button}>
</TouchableOpacity>
{
  CurrentListVideo.map(thisVideo=>{
   return <ListRunning key={thisVideo._id} waitForDelete={deleteVideo} thisVideo={thisVideo}/>
  })
}

當我按下 TouchableOpacity 時，一切正常，但在

CurrentListVideo.map(thisVideo=>{
   return <ListRunning key={thisVideo._id} waitForDelete={deleteVideo} thisVideo={thisVideo}/>
  })

還有 3 個項目，這個問題我花了 2 天，請幫忙

Answer 1

好吧，這比我想象的要容易，只需添加 [...]

onChangeCurrentListVideo([...CurrentListVideo])