0

我设置了一个数组的值，即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

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

4

1 回答 1

1

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

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

@action
addItem(item) {
    ...
}

或者

addItem = action(() => {
     ...
});
于 2017-03-27T14:12:20.403 回答