反應在組件中獲得可觀察值

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> 
    ); 
    } 
} 

我希望看到所有列表項，但沒有在HTML（僅「listItems中的」串），在控制檯中沒有錯誤。我如何修復和調試它？使用「調試器」關鍵字沒有顯示任何可觀察的。

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}>。