реагируют на получение наблюдаемых значений в компоненте

Question

Подсчет массива obsrv в компоненте ниже;

class AnnouncementState { 
    @observable categories =[]; 
    constructor(){ 
     this.getAnnouncementCategory(); 
    } 

    getAnnouncementCategory() { 
    fetch(`..`) 
     .then((response) => { 
     return response.json(); 
     }) 
     .then((response) => { 
     this.categories = response.value.map((item , i)=>{ return {Id:item.Id, Title:item.Title} }); 
     }, (error) => { 
     }); 
    } 
} 

Я проверил полученные значения в порядке. и я стараюсь установить его в компоненте и сделать его ниже;

@observer 
class AnnouncementComponent extends React.Component { 
    categories = []; 
    componentWillMount(){ 
    debugger 
    this.categories=this.props.announcement.categories; 
    } 

    render() { 
    const listItems = this.categories.map((item) => { 
     return (<li>...</li>) 
    }); 

    return (
      <div id="announcements-tab"> 
      List Items: 
      <ul className="nav nav-tabs"> 
       {listItems} 
      </ul> 
      </div> 
    ); 
    } 
} 

Я ожидал увидеть все пункты списка, но нет (только «ListItems» строка) в HTML, нет ошибки в консоли. как я могу его исправить и отладить? использование ключевого слова «отладчик» ничего не показывает для наблюдаемого.

Answer 1

В вашем коде я не вижу, где вы создаете экземпляр AnnouncementState. Вот пример, как вы можете получить список категорий.
, например.

class AnnouncementState { 

    @observable categories =[]; 

    @action getAnnouncementCategory() { 
     fetch(`..`) 
      .then((response) => { 
     return response.json(); 
      }) 
      .then((response) => { 
     this.categories = response.value.map((item , i)=>{ return {Id:item.Id, Title:item.Title} }); 
      }, (error) => { 
      }); 
     } 
} 

export default new AnnouncementState(); //here you can create the instance. 


@observer 
@inject('store') //here substitute with your store name, the name you set in your provider 
class AnnouncementComponent extends React.Component { 

    componentWillMount(){ 
    debugger 
    this.props.store.getAnnouncementCategory(); 
    } 

    render() { 
    const listItems = this.props.store.categories.map((item) => { 
     return (<li>...</li>) 
    }); 

    return (
      <div id="announcements-tab"> 
      List Items: 
      <ul className="nav nav-tabs"> 
       {listItems} 
      </ul> 
      </div> 
    ); 
    } 
} 

Это должно работать, только убедитесь, что вы проходите правильный магазин с <Provider store={store}>.