如何根据id在react native更新状态?

Question

我有一个扁平体:

const displayMessageList = (message) => {
return (
<View>
{message.length > 0 && enableMoreMessages ? (
<View style={{ justifyContent: "center", alignItems: "center" }}>
<TouchableOpacity onPress={() => fetchMoreMessages()}>
<Text>More</Text>
</TouchableOpacity>
</View>
) : null}
<FlatList data={message} renderItem={displayMessageRenderItem} />
</View>
);
};

其中displaymessagerenderitem如下所示:

const displayMessageRenderItem = ({ item }) => {
var audio;
return (
<View style={{ padding: 10 }}>
{item.type == 2 ? (
<View>
{item.media_list && item.media_list.length > 0 && (
<View style={styles.servermessage}>
{item.media_list[0].media_url ? (
<Image
source={{ uri: item.media_list[0].media_url }}
style={{ height: 300, width: 300 }}
resizeMode="contain"
/>
) : null}
</View>
)}
<View style={styles.servermessage}>
<Text style={styles.servertext}>{item.message}</Text>
<Text style={styles.server_time_to_display}>
{item.time_to_display}
</Text>
</View>
</View>
) : (
<View style={{ alignItems: "flex-end" }}>
{item.media_list && item.media_list.length > 0 && (
<View style={styles.sendermessage}>
{item.type_of_message_content === "image" ? (
item.media_list[0].media_url ? (
<Image
source={{ uri: item.media_list[0].media_url }}
style={{ height: 300, width: 300 }}
resizeMode="contain"
/>
) : null
) : item.media_list[0].media_url ? (
soundpause === true ? (
<>
<View
style={{
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
}}
>
{item.sender && item.sender.pic_url != "" && (
<Image
source={{ uri: item.sender.pic_url }}
style={{ height: 50, width: 50, borderRadius: 25 }}
resizeMode="contain"
/>
)}
<TouchableOpacity
onPress={() =>
listenaudio(item.media_list[0].media_url, item.id)
}
>
<AntDesignIcon
name="caretright"
size={25}
color="#E23744"
/>
</TouchableOpacity>
<Image
source={Images.seekline}
style={{ height: 3 }}
tintColor="#E23744"
/>
</View>
</>
) : (
<>
<View
style={{
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
}}
>
{item.sender && item.sender.pic_url != "" && (
<Image
source={{ uri: item.sender.pic_url }}
style={{ height: 50, width: 50, borderRadius: 25 }}
resizeMode="contain"
/>
)}
<TouchableOpacity
onPress={() =>
listenaudio(item.media_list[0].media_url)
}
>
<AntDesignIcon
name="caretright"
size={25}
color="#B2B2B2"
/>
</TouchableOpacity>
<Image source={Images.seekline} style={{ height: 3 }} />
</View>
{/* <Text>{item.media_list[0].media_url}</Text> */}
</>
)
) : null}
<Text style={styles.sender_time_to_display}>
{item.time_to_display}
</Text>
</View>
)}
{item.message != "" && (
<View style={styles.sendermessage}>
<Text style={styles.sendertext}>{item.message}</Text>
<Text style={styles.sender_time_to_display}>
{item.time_to_display}
</Text>
</View>
)}
</View>
)}
</View>
);
};

inside listenaudio()我想将暂停状态设置为true/false，但仅适用于选定的项目:

const listenaudio = (audio, id) => {
setsoundpause(!soundpause);
console.log('audio', audio)
var sound = new Sound(audio, Sound.MAIN_BUNDLE, (error) => {
if (error) {
console.log('failed to load the sound', error);
return;
}
// loaded successfully
console.log('duration in seconds: ' + sound.getDuration() + 'number of channels: ' + sound.getNumberOfChannels());
// Play the sound with an onEnd callback
sound.play((success) => {
if (success) {
console.log('successfully finished playing');
} else {
console.log('playback failed due to audio decoding errors');
}
});
});
console.log('listen to', sound);
sound.setVolume(1);
};

然而，当我选择项目的所有状态在列表中的所有项目都在改变，谁能帮我出来这里?

任何线索都会很棒。如果还需要什么，请告诉我。

Thanks in advance

Answer 1

可以使用id

管理播放声音

const [playingId,setPlayingId] = useState(0)

设置listenaudio函数的id

setPlayingId(id);

和displayMessageRenderItem

比较

playingId == item.id