dispacting actions creator wird zweimal mit componentWillMount aufgerufen

Question

Ich rufe Action Creator mit componentWillMount-Methode,, dann wird es zweimal aufgerufen. schau unter Screenshot des Ergebnisses.

das ist meine Aktion Schöpfer:

export function fetchAdmin(){ 
    return (dispatch)=>{ 
     axios.get(`${Config.API_URL}/admin`,{ 
      headers: { authorization: localStorage.getItem('token')} 
     }) 
      .then(response => { 
        return dispatch({ 
         type: FETCH_DATA, 
         payload: response.data 
        }); 
       } 
      ) 
      .catch(response => { 
       console.log(response); 
      }); 
    } 
} 

und das ist mein Minderer:

import { FETCH_DATA } from '../actions/types'; 

export function admin(state= {}, action){ 
    switch(action.type){ 
     case FETCH_DATA: 
      return {...state, lists: action.payload }; 
     default: 
      return { state, lists: 'YEY!'} 
    } 


} 

und dies ist mein Behälter und die Art, wie ich mein nennen Aktionsersteller mit ComponentWillMount.

aus dem Screenshot nehme ich an, dass render() zweimal aufgerufen wird. Der erste Aufruf geht an den Ersteller der Standardaktion, sodass das Ergebnis "YEY!" und das zweite ist das gültige.

kann mir jemand erklären, warum componentWillMount so funktioniert und tatsächlich in der ersten render ich will nur mein Array nicht "YEY!" Wie löst man dieses Problem? Vielen Dank.

Answer 1

Hier ist kein Problem! Wenn Ihre Komponente erstes Mal machen, erreichte es die Wiedergabe, bevor die Logik componentWillMount beendet ist, so:

Zum ersten Mal Rendering: Ihre Komponente gemacht wird, während die lists in globalem Zustand der Standard ist die YEY! entspricht.

zum zweiten Mal Rendern: Wenn die Daten erfolgreich abgerufen, nachdem die Reduktions Änderung der lists im globalen Zustand mit den abgerufenen diejenigen nach, dass Ihre Komponente die Änderung aufgrund mapStateToProps erkennt, dass die lists aus dem globalen bekam Zustand.

Unnötig zu sagen, dass React-Komponente auf PropsChange neu gerendert wird, deshalb gibt es eine Methode componentWillReceiveProps, so dass Sie jedes Mal, wenn Sie Ihre Requisiten ändern, etwas Logik hinzufügen können.

Dieses Verhalten ermöglicht es Ihnen, die Daten zu verarbeiten warten werden abgeholt von:

• eine Lade spinner hinzufügen.
• Holen Sie sich Ihr Layout gerendert.
• Holen Sie sich die anderen Komponenten in Ihrer Seite gerendert.

Answer 2

Javascript ist asynchron. Die HTTP-Anforderung, die Sie ausführen, ist asynchron. Dies bedeutet, dass die Ausführung von Javascript fortgesetzt wird, solange die HTTP-Anforderung noch aussteht.

Also Reagiert bereits, während der Staat immer noch 'Yey' ist. So sollte es sein und auch die Schönheit von Redux, Aktionen sind Feuer und vergessen, sie blockieren nicht. Wenn React warten würde, bis die HTTP-Anfrage beendet ist, wäre die Benutzererfahrung schrecklich!

Wenn Sie nicht möchten, dass 'Yey' rendern. Sie sollten einen Loader oder etwas anzeigen, während die Anforderung noch aussteht.