Общее изменяемое состояние не обновляется в компоненте - PullRequest
Новая
       13

Общее изменяемое состояние не обновляется в компоненте

0 голосов
/ 19 апреля 2019

В моем приложении у зарегистрированного пользователя есть список контактов.Зарегистрированный пользователь может выполнять транзакции BTC с контактом, который отображается в ContactDetails> MoveList Component (массив транзакций, взятый из объекта контакта).Когда транзакция выполнена, функция contactFund () запускается в ContactDetails, и она добавляет новый ход зарегистрированным пользовательским «ходам» в хранилище Mobx (которое взаимодействует с бэкендом).Когда я запускаю транзакцию, хранилище обновляется, но список отображаемых транзакций не изменяется, только при обновлении.почему это не реагирует?Кстати, я использую декораторы «наблюдаемый-наблюдатель» и «наблюдатель».

Форма «Добавить транзакцию»: 

export default class TransferFund extends Component {

    state = {
        amount: 0,
    }

    handleInput = (ev) => {
        this.setState({ amount: ev.target.value });
    }

    handleSubmit = () => {
        let amount = parseFloat(this.state.amount);
        if (amount) this.props.transferFund(amount);

    }

    render() {
        return (
            <section className="transfer-funds">
                <h3>Transfer Coins To {this.props.contact.name}</h3>
                <label>Amount</label>
                <input type="text" onChange={this.handleInput} />
                <button onClick={this.handleSubmit}>Transfer</button>
            </section >
        )
    }
}

ContactDetails: 

/***** DEPENDS *****/
import React, { Component } from 'react';
import { observer } from 'mobx-react';

/***** COMPONENTS *****/
import TransferFund from '../components/TransferFund.js';
import MoveList from '../components/MoveList.js';


class ContactDetails extends Component {
    async componentDidMount() {
        const { id } = this.props.match.params;
        await this.props.store.fetchContact(id);
    }

    transferFund = async (amount) => {
        await this.props.store.addMove(amount);
    }

    render() {
        let contact = this.props.store.currContact;
        let user = this.props.store.signedUser; 
        return (
            <section className="contact-details">
                <TransferFund 
                    contact={contact}
                    transferFund={this.transferFund} />
                {this.props.store.signedUser &&
                    <MoveList
                        user={user}
                        contact={contact && contact} />
                }
            </section >
        )
    }
}

export default observer(ContactDetails);
...