구성 요소에 관찰 가능한 값이 있음

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에는 none ("listItems"문자열 만)이 표시 될 것으로 예상됩니다. 콘솔에는 오류가 없습니다. 어떻게 수정하고 디버깅 할 수 있습니까? "debugger"키워드를 사용하면 관찰 할 수있는 것이 없습니다.

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}>으로 올바른 저장소를 통과해야 작동합니다.