React Native 传播不可迭代示例的尝试无效,为了可迭代,非数组对象必须具有[Symbol.iterator]()方法,在我的应用中

pbpqsu0x  于 2023-01-27  发布在  React
关注(0)|答案(1)|浏览(224)

我试图通过使用平面列表(json API)和搜索栏在我的代码中显示搜索结果功能,但我发现这个错误,无法解决它。我可以运行搜索,但无法显示搜索结果,有人能帮我解决这个错误吗,因为这是我的大学作业
这是我的密码

import {
  Box,
  Text,
  Image,
  Heading,
  Center,
  ScrollView,
  Spinner,
  FlatList,
  Pressable,
  View,
  Stack,
} from 'native-base';
import React, { Component } from 'react';
import { Dimensions } from 'react-native';
import { ListItem, SearchBar } from '@rneui/themed';

const windowWidth = Dimensions.get('window').width;

class Ilegal extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      isLoading: true,
      isFetching: false,
      searchTxt: null,
      error: null,
      temp: [],
    };
  };

  async getData() {
    try {
      const response = await fetch(
        'https://ojk-invest-api.vercel.app/api/illegals'
      );
      const json = await response.json();
      this.setState({ data: json.data.illegals });
      this.setResult(json);
    } catch (error) {
      console.error(error);
    } finally {
      this.setState({ 
        isLoading: false,
        isFetching: false, 
      });
    }
  };

  setResult = (res) => {
    this.setState ({
      data: [...this.state.data, ...res],
      temp: [...this.state.temp, ...res],
      error: res.error || null,
      isLoading: false,
    });
  };

  renderHeader = () => {
    return <SearchBar placeholder='Cari Perusahaan..'
      lightTheme round editable={true}
      value={this.state.searchTxt}
      onChangeText={this.updateSearch}
      />
  };

  updateSearch = searchTxt => {
    this.setState({searchTxt}, () => {
      if ('' == searchTxt) {
        this.setState({
          data: [...this.state.temp],
        });
        return;
      }
        this.state.data = this.state.temp.filter(function (item) {
          return item.name.includes(searchTxt);
        }).map(function({ id, name, type }) {
            return {id, name, type};
        });
    });
  };

  componentDidMount() {
    this.getData();
  };

  onRefresh = () => {
    this.setState({ isFetching: true }, () => {
      this.getData();
    });
  };

  renderItem = ({ item }) => {
    const { navigation } = this.props;
    
    return (
      <>
        <Pressable
          style={{ padding: 20, backgroundColor: 'white' }}
          onPress={() => navigation.navigate('Detail Ilegal', { data: item })}>
          <Center>
            <View
              style={{
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text
                style={{
                  fontSize: 16,
                  width: windowWidth - 40,
                  textAlign: 'justify',
                  marginTop: 6,
                }}>
                {item.name}
              </Text>
              <Text
                style={{
                  color: '#808080',
                  fontSize: 14,
                  width: windowWidth - 40,
                  textAlign: 'justify',
                  marginTop: 6,
                }}>
                {item.type}
              </Text>
            </View>
          </Center>
        </Pressable>
        <View style={{ borderWidth: 0.5, borderColor: '#cccccc' }}></View>
      </>
    );
  };

  render() {
    const { data, isLoading, isFetching, error} = this.state;
    return (
      <View style={{ flex:1, justifyContent:'center', backgroundColor:'white', flexDirection: 'column', }}>
          {isLoading ? (
            <Spinner size="large" color="#AA0002" />
          ) : (
            <FlatList
              ListHeaderComponent={this.renderHeader}
              data={data}
              keyExtractor={({ link }, index) => link}
              renderItem={this.renderItem}
              onRefresh={this.onRefresh}
              refreshing={isFetching}
            />
          )}
        </View>
    );
  }
}

export default Ilegal;

你能帮我修复这个错误吗?

y4ekin9u

y4ekin9u1#

就我对你设置结果函数的理解,我认为错误在setResult()函数中,你是这样设置数据的
this.setState({ data: json.data.illegals });
getData()中,当您从API获取数据时,您将json作为参数发送到setResult(对象)。请尝试按以下方式更改您的setResult()

setResult = (res) => {
    this.setState ({
      data: [...this.state.data, ...res.data.illegals],
      temp: [...this.state.temp, ...res.data.illegals],
      error: res.error || null,
      isLoading: false,
    });
  };

相关问题