Minderer Daten nicht korrekt gerendert

Question

Daten von api-Aufruf zurückgegeben wird:

[ 
    { 
     "1": { 
      "id_post": 1, 
      "id_user": "user01", 
      "text": "post1 text", 
      "parentId": 11 
     } 
    }, 
    { 
     "2": { 
      "id_post": 2, 
      "id_user": "user01", 
      "text": "post2 text", 
      "parentId": 11 
     } 
    }, 
    { 
     "3": { 
      "id_post": 3, 
      "id_user": "user01", 
      "text": "post3 text", 
      "parentId": 22 
     } 
    } 
] 

Im Minderer der initialState ist:

const initialState = { 
    posts: [],   // <= Have tried with posts: {} and posts: '' 
    isFetching: false, 
    error: {} 
} 

Die Art und Weise der posts bevölkert ist:

case "FETCHING_POSTS_SUCCESS": 
    return { 
    ...state, 
    isFetching: false, 
    posts: action.data 
} 

kann ich mapStateToProps die Beiträge und wenn ich console.log("POSTS: ", this.props.posts) I erhalten:

BEITRÄGE:

0 : {1: {…}} 
1 : {2: {…}} 
2 : {3: {…}} 

Ist das, warum die folgende Funktion nicht funktioniert ?:

renderposts = (parentId = 1) => { 
    return Object.keys(this.props.posts) 
    .filter(id_post => this.props.posts[id_post].parentId == parentId) 
    .map((key, idx) => { 
     const post = this.props.post[key]; 
     return(
      <View> 
       <Text> { post.id_post } - { post.text } </Text> 
      </View> 
     ); 
    }); 
} 

ich keine Fehler bekommen, aber nichts zeigt entweder.

ich denke ich, wenn BEITRÄGE als zurückgegeben:

{1: {…}} 
{2: {…}} 
{3: {…}} 

in der Konsole (so ist es auf diese Weise wiedergegeben), wird es funktionieren. Wenn ja, wie mache ich das?

Vielen Dank.

Answer 1

Ihre Daten sind ein array nicht ein object so können Sie Object.keys darauf nicht tun.
Sie sollten zuerst .map darauf und dann durch die Schlüssel des Objekts durchlaufen.

Beispiel:

const posts = [ 
 
    { 
 
     "1": { 
 
      "id_post": 1, 
 
      "id_user": "user01", 
 
      "text": "post1 text", 
 
      "parentId": 11 
 
     } 
 
    }, 
 
    { 
 
     "2": { 
 
      "id_post": 2, 
 
      "id_user": "user01", 
 
      "text": "post2 text", 
 
      "parentId": 11 
 
     } 
 
    }, 
 
    { 
 
     "3": { 
 
      "id_post": 3, 
 
      "id_user": "user01", 
 
      "text": "post3 text", 
 
      "parentId": 22 
 
     } 
 
    } 
 
] 
 

 
const View = ({postId,postText }) => { 
 
    return(
 
    <div>{`${postId} - ${postText}`}</div> 
 
); 
 
} 
 

 
const renderposts = (parentId = 1) => { 
 
return posts.map(obj => { 
 
    return Object.keys(obj) 
 
    .filter(id => obj[id].parentId == parentId) 
 
    .map((key, idx) => { 
 
     const post = obj[key]; 
 
     return(
 
      <View postId={post.id_post} postText={post.text}/> 
 
     ); 
 
    }); 
 
    }); 
 
} 
 

 
class App extends React.Component{ 
 
    render(){ 
 
    return(
 
    <div> 
 
     {renderposts(11)} 
 
    </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 2

Sie sollten nicht Object.keys verwenden, wenn posts in Array ist:

renderposts = (parentId = 1) => { 
    return this.props.posts 
     .filter((post) => post.parentId === parentId) 
     .map((post) => { 
      return(
       <View> 
        <Text> { post.id_post } - { post.text } </Text> 
       </View> 
      ); 
     }); 
} 

Answer 3

Sie können console this.props.posts in Verfahren machen. Manchmal wird Ihre Komponente gerendert, bevor Daten von API abgerufen werden. Um dies zu gewährleisten, geschieht nicht, dass Sie eine weitere Variable isFetched als

const initialState = { 
    posts: [],   
    isFetching: false, 
    isFetched: false 
    error: {} 
} 

und nach api Erfolg Anruf wie wahr ist

case "FETCHING_POSTS_SUCCESS": 
    return { 
    ...state, 
    isFetching: false, 
    posts: action.data, 
    isFetched: true 
} 

Sie

überprüfen So in Render halten sollte

if(this.props.isFetched){ 
//do you code 
} 
else 
return;