Güncelleme parça devlet Redux ile Flatlist verileri görüntülemek için

oy
0

Ben veri almaya ve deposuna eklemek için Redux kullanıyorum ve ekledikten sonra ben Düz Listesinde Sonucu görmek için çalıştı ama aşağıdaki hata iletisi kaydedici görünür

Burada

ve ben bir süre aradı ve ben getirilen ve mağaza eklenebilmeniz verilere önce render gelen Yassı Listesini önlemek için koşullar kullanmak zorunda olduğu gerçeğini aldık, bu yüzden zorlamak için componentWillReceiveProps ile benim yerel bileşen durumuna verilerim listesini atamak çalıştı bileşen rerender ve Düz Listesi'nde verilerin listesini görmek ama zaten veri alınan ve mağaza kaydedilmiş kadar Düz Liste beklemesi koşulları kullanılan rağmen aniden aynı hata görünmesini.

veri aşağıdaki gibi görünüyor olduğunu

Burada

Düz Listesini ihtiva homePage.js

import React from 'react';
import { Text, View, ScrollView, TouchableOpacity, FlatList } from 'react- 
native';
import {Container, Header, Content, Item, Input, Button} from 'native-base';
import RPostCard from './reusablePostCard';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Foundation from 'react-native-vector-icons/Foundation';

class HomePage extends React.Component {
constructor(props){
    super(props);
    this.state = {
        postsData: []
    }
}

componentDidMount(){
    this.props.getNewsFeedPosts();
}

componentWillReceiveProps(nextProps){
    if (nextProps.postsData !== this.props.postData){
        this.setState({postsData: nextProps.postsData})
    }
}

render() {
    let { postsData, postsFetched } = this.props;
    return (
        <View style={styles.container}>
            <Header style={styles.header}>
                <View style={styles.messagesIconView}>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('Chat')}>
                        <FontAwesome5 name='comment' size={23} color='#ffffff'/>
                    </TouchableOpacity>
                </View>
                <View style={styles.telephoneIconView}>
                    <TouchableOpacity>
                        <Foundation name='telephone' size={25} color='#ffffff'/>
                    </TouchableOpacity>
                </View>
                <Content style={styles.searchContent}>
                    <Item style={styles.searchItem}>
                        <Input placeholder='ابحث هنا' placeholderTextColor='#ffffff' style={styles.inputValueStyle}/>
                        <FontAwesome5 name='search' size={15} color='#ffffff' style={styles.searchIconStyle}/>
                    </Item>
                </Content>
            </Header>
            {(this.state.postsData.length === 0) ?
                null
                :
                <ScrollView>
                    <FlatList
                        data={this.state.postsData}
                        renderItem={({postData}) => (<Text>{postData.title}</Text>)}
                    />
                </ScrollView>
            }
        </View>
    );
}
}

HomePage.defaultProps = {
}

export default HomePage;

mapstatetoprops & mapActionCreators içerirler Ev Konteyner

import {connect} from react-redux;
import HomePage from ../../components/HomeScreens/HomePage;
import {
    getNewsFeedPosts
} from ../../modules/Home;

const mapStateToProps = (state) =>({
    postsData: state.Home.posts,
    postsFetched: state.Home.postsFetched,
});

const mapActionCreators = {
    getNewsFeedPosts
};
export default connect(mapStateToProps, mapActionCreators)(HomePage);

componentdidmount Eylem Handler function () HomePage.js aramak

function handleNewsFeedPosts(state, action){
const postsData = action.payload.data.posts;
const likesNo = action.payload.data.likes;
const commentsNo = action.payload.data.comments;
const post = {};
var posts = [];
var postsIds = [];
var imageLink = http://192.168.1.117:3000/image/;
var month_ar = '';
var month_en = '';
var oldPostsState = [];
var oldPostsIdsState =[];
for (i = 0; i < postsData.length; i++) {
    //filter description from <p> </p> tags
    const description = postsData[i].description;
    const filteredDescription = description.replace(/<[^>]*>/g, '');

    //filter date and time from  '-' and split date and time converting it to arabic
    const created_at = postsData[i].created_at.replace(/-/g, ' ');
    created_at = postsData[i].created_at.replace(/:/g, ' ');
    const created_at_filter = postsData[i].created_at.split(' ');
    const date = created_at_filter[0].split('-');
    const month = parseInt(date[1]);

    switch (month) {
        case 1:
            month_en =  January ;
            month_ar =  يناير ;
            break;
        case 2:
            month_en =  February ;
            month_ar =  فبراير ;
            break;
        case 3:
            month_en =  March ;
            month_ar =  مارس ;
            break;
        case 4:
            month_en =  April ;
            month_ar =  ابريل ;
            break;
        case 5:
            month_en =  May ;
            month_ar =  مايو ;
            break;
        case 6:
            month_en =  June ;
            month_ar =  يونيو ;
            break;
        case 7:
            month_en =  July ;
            month_ar =  يوليو ;
            break;
        case 8:
            month_en =  August ;
            month_ar =  أغسطس ;
            break;
        case 9:
            month_en = September;
            month_ar = سبتمبر;
            break;
        case 10:
            month_en =  October ;
            month_ar =  أكتوبر ;
            break;
        case 11:
            month_en =  November ;
            month_ar =  نوفمبر ;
            break;
        case 12:
            month_en =  December ;
            month_ar =  ديسمبر ;
            break;
    }

    const created_at_ar = created_at.replace(/\d/g, d =>  '٠١٢٣٤٥٦٧٨٩'[d]);

    //Ready English format
    const created_at_en = setCharAt(created_at, 4, month_en);

    //Ready Arabic format
    created_at_ar = setCharAt(created_at_ar, 4, month_ar);

    //Link post image name with the complete require link
    const image = postsData[i].image;
    imageLink = imageLink.substr(0,imageLink.length) + image;


    const post = {
        id: postsData[i].id,
        title: postsData[i].title,
        description: filteredDescription,
        type: postsData[i].type,
        category_id: postsData[i].category_id,
        image: imageLink,
        created_at_ar: created_at_ar,
        created_at_en: created_at_en,
        likesNo: likesNo[i],
        commentsNo: commentsNo[i],
    }

    //push posts data to one array 
    posts.push(post);

    //collect posts id to send it back and get a new array of posts
    postsIds.push(post.id);

    }
    if (fetchDataCounter == 0){
        var newPostsState = posts;
        var newPostsIdsState = postsIds;
    }
    else{
        //merge old posts state array with new one
        oldPostsState = action.posts;
        var newPostsState = oldPostsState.concat(posts);

        //merge old posts ids state array with new one
        oldPostsIdsState = action.postsIds;
        var newPostsIdsState = oldPostsIdsState.concat(postsIds);
    }

    fetchDataCounter ++;
    return update(state, {
        posts:{
            $set: newPostsState
        },
        postsIds:{
            $set: newPostsIdsState
        },
        postsFetched: {
            $set: true
        }
    });
}



const ACTION_HANDLER = {
    NEWS_FEED_POSTS:handleNewsFeedPosts
}
const initialState = {
    posts:[],
    postsFetched: false,
    postsIds:{},
    data: 'blablabla...'
}
Oluştur 08/11/2018 saat 11:31
kaynak kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
0

Her şeyden önce, kendi başına FlatList verilirse, bir scrollview onu sarmak için gerek yoktur.

Ayrıca Buradaki sorunun olduğunu düşünüyorum

renderItem={({postData}) => (<Text>{postData.title}</Text>)}

renderItem bir işlevi, aşağıdaki yapıya sahip bir amacı, bir parametredir:

export interface ListRenderItemInfo<ItemT> {

   item: ItemT;

   index: number;

   separators: {
       highlight: () => void;
       unhighlight: () => void;
       updateProps: (select: "leading" | "trailing", newProps: any) => void;
   };
}

Bu gibi renderItem işlevinde öğe nesneyi ayıklamak gerekiyor

renderItem={({item}) => (<Text>{item.title}</Text>)}

Sonra o iş olur :)

Cevap 08/11/2018 saat 13:30
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more