使用 React Native Context 更新搜索栏中的列表

问题描述

我的 React Native 应用程序中有一个搜索栏，没有上下文实现，列表显示正确。但是当我实现上下文时，列表不再显示，只显示搜索栏，当我在搜索栏上输入时，我收到此错误消息； ERROR TypeError: item.indexOf is not a function. (In 'item.indexOf(str)','item.indexOf' is undefined) 我知道遗漏了一些东西，但我不知道在哪里遗漏了它。请我需要帮助来解决这个问题。下面是我的代码：

//....
//....
import songs from '../../SongData';

import styles from './styles';

const data = [songs];

const ListContext = React.createContext({
  list: [data],setList: () => {}
});

export const ListProvider = ({ children }) => {
  const [list,setList] = useState(data);

  return (
    <ListContext.Provider value={{list,setList}}>
      {children}
    </ListContext.Provider>
  );
};

const Item = ({ item }) => {
  return (
    <View>
      <Text>{item.name}</Text>
    </View>
  );
};

const Playerlist = () => {
    const [isdisabled,setisdisabled] = useState(false);
    const [loading,setLoading] = useState(false);
    const [isPlayed,setIsPlayed] = useState(false);
    const [data,setData] = useState(songs);
    
    //....
    //.....
    
    const renderHeader = () => {
    const [text,setText] = useState("");
    const listContext = useContext(ListContext);

    const updateQuery = (str) => {
      listContext.setList(data.filter((item) => item.indexOf(str) > -1));
      setText(str);
    };

    return (
      <View
        style={{
          backgroundColor: '#fff',padding: 10,marginVertical: 10,borderRadius: 20
        }}
      >
        <TextInput
          autoCapitalize="none"
          autoCorrect={false}
          clearButtonMode="always"
          value={text}
          onChangeText={updateQuery}
          placeholder="Search songs"
          style={{ backgroundColor: '#fff',paddingHorizontal: 20 }} 
        />
      </View>
    )
  };

  const renderItem = ({ item,index }) => (
    <ScrollView style={{flex: 1}}>
        <View style={styles.item}>
          <Avatar
                source={{ uri: item.picture }}
                style={{ marginRight: 16 }} 
                size='giant'
          />
          <Text style={styles.title} category='s1'> {item.title} </Text>
        </View>
        <Text 
          style={{ 
            color: '#444',fontSize: 11,marginLeft: 112,marginVertical: -20,bottom: 27 
          }}
          category='s1'
          >{item.ArtistName} 
        </Text>
        <Text 
          style={{ 
            color: '#999',marginLeft: 110,top: 10
          }}
          category='s1'
          >Genre: {item.genre} 
        </Text>
        <View style={{flexDirection: 'row',left: '230%',bottom: '7%'}}>
              <TouchableOpacity 
                onPress={()=>playSound(item,index)} 
                style={{padding: 10,top: 30,left: 30}}
              >
                <Ionicons name="play" color={isPlayed ? 'red' : '#555555'} size={22} />
              </TouchableOpacity>
              <TouchableOpacity 
                onPress={()=>stopSound(index)} 
                style={{padding: 10,left: 20}}
              >
                <Ionicons name="stop" color="#555555" size={22} />
              </TouchableOpacity>
            </View>
    </ScrollView>
  );



  const renderFooter = () => {
    if (!loading) return null

    return (
        <View
            style={{
                paddingVertical: 15,borderTopWidth: 1,borderColor: '#CED0CE',}}
        >
            <ActivityIndicator animating size='large' />
        </View>
    );
  }

  const renderSeparator = () => {
    return (
        <View 
            style={{
                height: 1,width: '86%',backgroundColor: '#CED0CE',marginLeft: '5%',}}
        />
    )
  }



  return (
      <ListContext.Consumer>
        {(context) => (
          <SafeAreaView style={styles.container}>
            <FlatList
              data={context.list}
              renderItem={renderItem}
              keyExtractor={(i,key) => 'item-' + key}
              ItemSeparatorComponent={renderSeparator}
              ListHeaderComponent={renderHeader}
              ListFooterComponent={renderFooter}
            />
          </SafeAreaView>
        )}
      </ListContext.Consumer>
      
  );
};

这是 SongData.js 代码：

const songs = [
    {
        id: 1,title: 'Hero',ArtistName: 'Bethany Dilon',genre: 'pop',picture: 'https://scontent-los2-1.xx.fbcdn.net/v/t1.18169-9/16195530_10211997136709517_8578854309931959016_n.jpg?_nc_cat=101&ccb=1-3&_nc_sid=09cbfe&_nc_eui2=AeEvt5zlNj1bM87SMIgRXz8VjFbfh8f8mfyMVt-Hx_yZ_ISR6pzt6j1tOqssNCwDfnM&_nc_ohc=oQeQeYLPRz8AX_n81Yh&_nc_ht=scontent-los2-1.xx&oh=d87b3097c543a39067095bacfbeb004d&oe=609BF1DC',url: require('../../assets/songs/Hero.mp3'),},{
        id: 2,title: 'Advertising URL',genre: 'Soft Rock',picture: 'https://scontent-los2-1.xx.fbcdn.net/v/t1.6435-0/s640x640/169534769_1185223728571457_6192837830233317030_n.jpg?_nc_cat=101&ccb=1-3&_nc_sid=9267fe&_nc_eui2=AeH2splO8pf4k-atqrUeWWApKjkWnAsELXsqORaccwQte9doNY5rNtBrWht-o_CYYR4&_nc_ohc=plbZA_Pv91EAX_quQhG&_nc_ht=scontent-los2-1.xx&tp=7&oh=abec7b3bd8ddc13b6c3c0c510a33d8dc&oe=60997696',url:
            'https://raw.githubusercontent.com/zmxv/react-native-sound-demo/master/advertising.mp3',{
        id: 3,title: 'Stronger',genre: 'Country',isRequire: true,url: require('../../assets/songs/Stronger.mp3'),{
        id: 4,title: 'Faded',ArtistName: 'Luchee',genre: 'Techno',url: 'https://github.com/ShivamJoker/sample-songs/raw/master/Faded.mp3',{
        id: 5,title: 'Solo',ArtistName: 'Solo Cosmos',genre: 'Afrobeat',url: 'https://github.com/ShivamJoker/sample-songs/raw/master/Solo.mp3',{
        id: 6,title: 'Death bed',ArtistName: 'Omowunmi feat Wizkid',genre: 'Afrocentric',url: 'https://github.com/ShivamJoker/sample-songs/raw/master/death%20bed.mp3',{
        id: 7,{
        id: 8,{
        id: 9,{
        id: 10,{
        id: 11,{
        id: 12,];

  export default songs;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）