mobx 不看变量

Question

我设置了一个数组的值，obv。并迭代它以创建我希望在浏览器中看到此 html 输出但空白页面的 jsx 元素..

代码如下：

    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.js

import { extendObservable, computed } from 'mobx';
class AppState {
    constructor() {
    extendObservable(this, {
      items: []
    });
  }
  addItem(item) {
    debugger
      this.items.push(item)
  }
}
export default AppState

我检查了加载到项目的内容数据很好..这里有什么问题？

Answer 1

在您的 App 组件中 this.props.items 应该是 this.props.appState.items。

在您的 AppState 中 class addItem 应该被定义为一个动作：

@action
addItem(item) {
    ...
}

或

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

mobx 不看变量

mobx dont watch the variable

reactjs

mobx-react