mobx ne regarde pas la variable

Question

Je définis les valeurs d'un tableau obv. et itérer dessus pour créer jsx élément que je m'y attendais à voir dans cette sortie navigateur HTML, mais page blanche ..

Voici le code:

class App extends Component { 
     constructor(props){ 
     super(props); 
     } 
     render() { 
     const {socialJSX} = this.props.items?this.props.items.map((item)=> { 
      return <a className={"icon32-"+item.Title} href={item.Link.Url} target="_blank" title={item.Description} /> 
     }):""; 
     debugger 
     return (
      <div id="socialWrapper"> 
     <div id="socialWrap"> 
      {socialJSX} 
     </div> 
     </div> 
     ); 
     } 

     componentWillMount() { 
    fetch(`http://remoteurl`, { 
     method: 'GET', 
     headers: { 
     'Accept': 'application/json;', 
     'Content-Type': 'application/json' 
     }}).then((response) => { 
      return response.json(); 
      }) 
      .then((response) => { 
      $.each(response.value,(index, value)=>{ 
       if(value){ 
       this.props.appState.addItem({ 
        Title:value.Title, 
        Active:value.Active, 
        Description:value.Description, 
        Link:{Address:value.Link.Url, Description:value.Link.Description} 
       }); 
       } 
      }); 
      })= 
     } 
    } 

export default observer(App); 

index.js:

const appState = new AppState(); 

ReactDOM.render(
    <App appState={appState} />, 
    document.getElementById('root') 
); 

AppState J'ai vérifié les données de contenu chargées aux éléments bien .. quel problème ici?

Answer 1

Dans votre composant d'application, this.props.items doit être this.props.appState.items.

Dans votre classe AppState addItem devrait être définie comme une action:

@action 
addItem(item) { 
    ... 
} 

ou

addItem = action(() => { 
    ... 
});