如何根据 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 但仅针对 selected 项目：

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

  };

然而，当我 select 列表中所有项目的所有状态都发生变化时，有人可以帮我解决这个问题吗？

任何线索都会很棒。让我知道是否还有其他要求。

提前致谢

Answer 1

您可以使用 id 管理播放声音

const [playingId,setPlayingId] = useState(0)

在listenaudio函数中设置id

setPlayingId(id);

并在 displayMessageRenderItem 中比较

playingId == item.id

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

how to update state according to id in react native?

reactjs

react-native

react-native-android

react-native-ios

react-native-flatlist