Question

我是编程新手，我一直在尝试使用MobX学习React，遇到了这个问题，我在主页上使用axios更新了商店，并在其他页面上检查了商店内容（adminPage.js）它是空的。

这是我的商店组件：

import { observable, action, decorate } from 'mobx'
import Axios from 'axios';
import { API_URL_1 } from '../components/url';

export var Product={
    list:[],
    cart:[],
    getList(){
        console.log('getList berjalan');
        Axios.get(API_URL_1 + '/products')
        .then(ok => {
            console.log(ok.data)
            Product.list = ok.data
        }).catch(error=>{
            console.log(error)
        })
        console.log(Product.list)
    },
    addToCartFunc(id){
        Product.cart.push(Product.list[id])
    },
    checkListContentFunc(){
        Product.list.map(data=>{
            console.log(data.id)
        })
    }
}

decorate(Product, {
    list : observable,
    cart : observable,
    getList : action,
    addToCartFunc : action
})

这是将呈现我的商店内容的组件：

import React, { Component } from 'react';
import {Product} from '../store/Product'
import { observer, componentWillReact } from 'mobx-react';
import {withRouter} from 'react-router';

class AdminPage extends Component {
    renderProductList(){
        console.log('render list berjalan')
        console.log(Product.list)
        return(
            Product.list.map(Product=>{
                console.log(Product)
                return(
                    <tbody>
                        <td>{Product.id}</td>
                        <td>{Product.name}</td>
                        <td>{Product.price}</td>
                    </tbody>
                )
            })
        )
    }

    componentWillReact(){
        console.log("I will re-render, since the todo has changed!")
    }
    render(){
        return(
            <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <td>id</td>
                                <td>Name</td>
                                <td>Price</td>
                            </tr>
                        </thead>
                        {this.renderProductList()}
                        <tbody>
                            <td><textarea ref="id"></textarea></td>
                            <td><textarea ref="name"></textarea></td>
                            <td><textarea ref="price"></textarea></td>
                            <td><input  type="button" value="Add"  className="btn btn-primary"/></td>
                        </tbody>
                    </table>
                    <input type="button" onClick={()=>{Product.checkListContentFunc()}} value="test"/>

                </div>
        )
    }
}

export default withRouter(observer(AdminPage))

这是我的github代表的链接： https://github.com/YoSoyAisoy/E-Commerce-React-MobX-

抱歉，这是一个愚蠢的问题。编辑：添加了我的代码

React中的其他组件未检测到商店更改

0 个答案: