在组件

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”字符串），在控制台中没有错误。我该如何修复和调试它？使用“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}>传递正确的商店。