Question

我正在学习ReactJS中的Flux。我使用Flux模式在ReactJS中编写了一个简单的代码。在此代码中，正在显示一些记录，并且可以选择添加新记录。问题是当我触发事件时，即当我单击添加按钮时，不会从this.on(CHANGE_EVENT, callback);调用回调函数，因此，新记录不会显示在屏幕上。因此请告诉我为什么没有调用这个callback函数？以及如何解决这个问题？

Store.js

import React from 'react';
import Dispatcher from './Dispatcher.js';
import { EventEmitter } from "events";

class Store extends EventEmitter {

    constructor() {
        super();
        this.records = [
            {
                id: 1,
                name: 'First Record'
            },
            {
                id: 2,
                name: 'Second Record'
            },
            {
                id: 3,
                name: 'Third Record'
            },
            {
                id: 4,
                name: 'Fourth Record'
            },
            {
                id: 5,
                name: 'Fifth Record'
            }
        ]
    };

    createRecord(name, id) {
        this.records.push({
            id: id,
            name: name
        });
        this.emit("change");
    }

    addChangeListener(CHANGE_EVENT, callback) {
        this.on(CHANGE_EVENT, callback);
    }

    handleActions(action) {
        switch(action.type) {
            case "ADD_RECORD": {
                this.createRecord(action.name, action.id);
                break;
            }
        }
    }

    getRecords() {
        return this.records;
    }
};

const recordsStore = new Store();
Dispatcher.register(recordsStore.handleActions.bind(recordsStore));

export default Store;

View.jsx

import React from 'react';
import Store from './Store.js';
import {addRecord} from "./Action.js";


class View extends React.Component {
    constructor() {
        super();
        this.Store = new Store();
        this.state = {records: this.Store.getRecords()};
    }

    render() {
        return (
            <div className="container" style={{marginTop:'25px'}}>
                <ul className="list-group">
                    <li style={{backgroundColor:'#696969', color:'#f5f5f5', textAlign:'center', padding:'5px', fontSize:'16px', borderRadius:'5px 5px 0px 0px'}}><b>Records</b></li>
                    {this.state.records.map((eachRecord,index) =>
                        <ListItem key={index} singleRecord={eachRecord} />
                    )}
                </ul>
                <input type="text" ref="input"/>
                <button  onClick={()=>addRecord(this.refs.input.value)}>Add</button>
            </div>
        );
    }

    componentWillMount() {
        this.Store.addChangeListener("change", this.updateStore);
    }

    updateStore() {
        this.setState({
            records: this.Store.getRecords()
        });
    }
}

class ListItem extends React.Component {
    render() {
        return (
            <li className="list-group-item" style={{cursor:'pointer'}}>
                <b>{this.props.singleRecord.name}</b>
                <button style={{float:'right'}}>Delete</button>
            </li>
        );
    }
}

export default View;

Answer 1

这就是我设置助焊剂店的方法 - 关键点是：

在构造函数
这样可以更容易地生成一个theta = np.reshape([1, 2, 3], 3, 1) X = np.random.randn(100, 3) y = np.round(np.random.rand(100, 1)) optim = minimize(CF, theta, method='BFGS', jac=gr, args=(X,y)) print(optim) # fun: 0.6830931976615066 # hess_inv: array([[ 4.51307367, -0.13048255, 0.9400538 ], # [-0.13048255, 3.53320257, 0.32364498], # [ 0.9400538 , 0.32364498, 5.08740428]]) # jac: array([ -9.20709950e-07, 3.34459058e-08, 2.21354905e-07]) # message: 'Optimization terminated successfully.' # nfev: 15 # nit: 13 # njev: 15 # status: 0 # success: True # x: array([-0.07794477, 0.14840167, 0.24572182])常量并将其隐藏在商店内。
通常，您希望您的商店只有一个实例。因此，当您导出它时，您将CHANGE_EVENT。这样，所有组件都可以使用同一个商店。

商品

export default new Store()

-

在视图中，您应该在const CHANGE_EVENT = 'change'; class Store extends EventEmitter { constructor() { super(); Dispatcher.register(this.handleActions.bind(this)); } createRecord(name, id) { // code.. this.emitChange(); } emitChange() { this.emit(CHANGE_EVENT); } addChangeListener(callback) { this.on(CHANGE_EVENT, callback); } removeChangeListener(callback) { this.removeListener(CHANGE_EVENT, callback); } handleActions(action) { switch (action.type) { case 'ADD_RECORD': { this.createRecord(action.name, action.id); break; } } } getRecords() { return this.records; } } export default new Store();中绑定您的侦听器并记住删除componentDidMount中的侦听器。

查看

componentWillUnmount

在事件触发时没有调用回调函数

1 个答案: