Mobx 商店更改未反映在浏览器中答案

【问题标题】：Mobx store changes not reflected in browserMobx 商店更改未反映在浏览器中
【发布时间】：2016-08-07 14:35:09
【问题描述】：

api调用存储数据变化后视图没有反映，代码如下：

store.js

import axios from 'axios';
import {encrypt, decrypt} from '../utils/pgp.js'
import {observable, action, computed, runInAction} from "mobx";


export var appState = observable({
    bunny: []
});

appState.loadBunny = action(function(bugs){
    bugs.forEach(async data => {
        let temp = {};
        temp['id'] = data.id;
        temp['site_url'] = data.site_url;
        temp['tag'] = data.tag;
        temp['email'] = await decrypt(sessionStorage.getItem('key'), data.email);
        temp['username'] = await decrypt(sessionStorage.getItem('key'), data.username);
        temp['password'] = await decrypt(sessionStorage.getItem('key'), data.password);
        temp['note'] = await decrypt(sessionStorage.getItem('key'), data.note);
        temp['created_at'] = data.created_at;
        temp['updated_at'] = data.updated_at;
        runInAction("update state after decrypting data", () => {
            this.bunny.push(temp);
        });

    });
});

appState.fetch = async function() {
    let xoxo = await axios.get('/api/vault/', {
        headers: {'Authorization': "JWT " + sessionStorage.getItem('token')}
    });
    this.loadBunny(xoxo.data);
}

app.js

ReactDOM.render(
    <Router history={browserHistory} >
            <Route path="passwords" store={appState} onEnter={keyRequired} component={PasswordsTable} />
        </Route>
    </Router>,
    document.getElementById('app')
);

PasswordsTable.js

import React from 'react';
import axios from 'axios';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import {observer} from 'mobx-react';


@observer
export default class Passwords extends React.Component {

    componentDidMount = () => {
        this.props.routes[1].store.fetch();
    }

    render() {
        return (
            <div>
            <BootstrapTable data={this.props.routes[1].store.bunny} striped={true} hover={true} condensed={true} pagination={true} search={true}>
                <TableHeaderColumn dataField="id" isKey={true}>ID</TableHeaderColumn>
                <TableHeaderColumn dataField="site_url" dataSort={true}>URL</TableHeaderColumn>
                <TableHeaderColumn dataField="email">Email</TableHeaderColumn>
                <TableHeaderColumn dataField="username">Username</TableHeaderColumn>
                <TableHeaderColumn dataField="password">Password</TableHeaderColumn>
                <TableHeaderColumn dataField="note">Note</TableHeaderColumn>
                <TableHeaderColumn dataField="tag">Tag</TableHeaderColumn>
                <TableHeaderColumn dataField="created_at">Created At</TableHeaderColumn>
                <TableHeaderColumn dataField="updated_at">Updated At</TableHeaderColumn>
            </BootstrapTable>
            </div>
            )
    }
}

【问题讨论】：

标签： javascript reactjs mobx

【解决方案1】：

因为引导表不是观察者组件，它不能对可观察的数据做出反应。通过调用 .slice () 或在渲染方法中的 bunny 数组上使用 mobx.toJS 来给它简单的 daya

【讨论】：