我想做什么

我正在構建一個簡單的世博管理音頻播放器應用程式。在我的應用程式螢屏上，我需要顯示歌曲串列。當用戶點擊歌曲時，它會播放，一旦播放結束，頁面底部的“播放的歌曲”應該會增加。我為此使用了expo-av API。

這是應用程式的細分：

應用程式.js

在這里，我有一個包含歌曲的陣列（資料）。為簡單起見，我對所有元素使用相同的歌曲。count 變數保存歌曲的數量，并且有一個函式 (IncreaseCount) 作為 prop 傳遞給 ChildComponent。Flatlist 用于渲染 ChildComponents

import { View, Text, FlatList } from 'react-native'
import React, {useState} from 'react'
import ChildComponent from './ChildComponent';

const Data = [
  {
    key: "1",
    song: "https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand3.wav"
  },
  {
    key: "2",
    song: "https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand3.wav"
  },
  {
    key: "3",
    song: "https://www2.cs.uic.edu/~i101/SoundFiles/CantinaBand3.wav"
  }
]


export default function App() {
const [count, setcount] = useState(0);

const IncreaseCount = ()=>{
  setcount(count   1);
}

const renderItem = ({item, index})=>{
  return(
    <View style={{marginTop: 10}} >
  <ChildComponent path={item.path} IncreaseCount={()=>IncreaseCount} index={index} songURL={item.song}/>
  </View>
  )
}


  return (
    <View style={{justifyContent: "center", alignItems: "center", marginTop: 200}}>
      <FlatList
      data={Data}
      renderItem={renderItem}
      extraData={count}
      />
      <Text style={{marginTop: 30}}> Number of Songs Played: {count} </Text>
    </View>
  )
}

子組件

這里我使用 expo-av API。使用loadAsync()方法，我最初使用 useEffect 鉤子在第一次渲染時加載歌曲。然后使用按鈕的 onPress 方法呼叫 playBackObject 的playAsync()方法。使用setOnPlayBackStatusUpdate方法，我監聽狀態變化。當 playBackObjectStatus.didJustFinish 變為 true 時，我呼叫 props.IncreaseCount()。

import { View, Button } from 'react-native'
import React, {useRef, useEffect} from 'react'
import { Audio } from 'expo-av';

export default function ChildComponent(props) {
const sound = useRef(new Audio.Sound());
const PlayBackStatus = useRef();

useEffect(()=>{
  LoadAudio();
  return ()=> sound.current.unloadAsync()
},[])

const LoadAudio = async ()=>{
  PlayBackStatus.current = sound.current.loadAsync({uri: props.songURL})
  .then((res)=>{
    console.log(`load result : ${res}`)

  })
  .catch((err)=>console.log(err))
}

const PlayAuido = async ()=>{
  PlayBackStatus.current = sound.current.playAsync()
  .then((res)=>console.log(`result of playing: ${res}`))
  .catch((err)=>console.log(`PlayAsync Failed ${err}`))
}

sound.current.setOnPlaybackStatusUpdate(
  (playBackObjectStatus)=>{
    console.log(`Audio Finished Playing: ${playBackObjectStatus.didJustFinish}`)
    if(playBackObjectStatus.didJustFinish){
      console.log(`Inside the If Condition, Did the Audio Finished Playing?: ${playBackObjectStatus .didJustFinish}`)
      props.IncreaseCount();
    }
  }
)

  return (
    <View >
      <Button title="Play Sound" onPress={PlayAuido} />
    </View>
  );
}

我面臨的問題

無論我做什么，我都無法在 App.js 中呼叫 props.IncreaseCount。在setOnPlayBackStatusUpdate的if條件中使用console.log，我知道props.IncreaseCount()方法被呼叫了，但是App.js中的IncreaseCount()函式從來沒有被呼叫過。任何幫助是極大的贊賞！

這里是小吃

uj5u.com熱心網友回復：

在這里請這樣做

<ChildComponent path={item.path} IncreaseCount={IncreaseCount} index={index} songURL={item.song}/>

我變了IncreaseCount={IncreaseCount}

請讓我知道這是否有幫助

uj5u.com熱心網友回復：

您有兩種呼叫IncreaseCount函式的方法，在ChildComponent

<ChildComponent IncreaseCount={IncreaseCount} path={item.path} .......

或者

<ChildComponent IncreaseCount={() => IncreaseCount()} path={item.path} .......

uj5u.com熱心網友回復：

將increaseCountprop 傳遞給ChildComponent

以下是正確的方法：

return(
<View style={{marginTop: 10}} >
  <ChildComponent path={item.path} IncreaseCount={IncreaseCount} index={index} songURL={item.song}/>
</View>

)

或者：IncreaseCount={() => IncreaseCount()}

標籤：javascript 反应 反应式

上一篇：如何在JavaScript中將“dd/mm/yyyy”轉換為ISO字串

下一篇：撰寫具有多個引數的Currying