平面列表在React-Native中不显示任何数据

时间:2020-06-15 19:26:36

标签: javascript react-native

我的单位列表没有任何数据。我正在使用opentable Api和React useStateuseEffect。我想查看我的列表中的数据。

这是我的代码


    useEffect(() => {
        fetchCity()
    }, [])

    const fetchCity = async ()=>{
        let response = await axios.get('https://opentable.herokuapp.com/api/cities')
        setMyCityList(response)
        setLoading(false)
        console.log(response.data.cities)
        console.log(response.data.count)
    }



    const renderCity = ({item})=>{
        console.log("merhaba")
        return (
            <CityItem  mycities={item.data.cities} />

        )
    }

    const searchCity =(text)=>{
        console.log(text)
    }
    return (
        <SafeAreaView>
            <View>

                <Searchbar placeholder="şehir arayın" onChangeText ={searchCity} />
                {loading ?
                    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                        <ActivityIndicator size="large" />
                    </View>
                    :
                    <FlatList

                    keyExtractor = {(item,index)=> index.toString()}
                    data={myCityLİst}
                    renderItem={renderCity}
                />}
            </View>
        </SafeAreaView>
    )
}
export {listCity}

我可以在控制台上看到数据,但在平面列表上看不到

1 个答案:

答案 0 :(得分:0)

尝试使用以下代码修改您的Flatlist。从那以后,您需要将数组列表传递给道具数据。

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class ChildComponent {
  const completed$ = new Subject<any>();

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.getIsExpanded().pipe(
      takeUntil(this.completed$)
    ).subscribe(
      data => {
        if (data) {
          console.log("detail complete");
        }
     }
    );
  }

  ngOnDestroy() {
    this.completed$.next();
    this.completed$.complete();
  }
}

您可以仅使用<FlatList keyExtractor = {(item,index)=> index.toString()} data={myCityLİst.data.cities} renderItem={renderCity} /> 来更新setMyCityList(response)钩子