Question

在我的应用中，一个登录用户拥有联系人列表。记录的用户可以对联系人进行BTC事务，该事务在ContactDetails> MoveList组件（从联系人对象获取的事务数组）上呈现。进行事务处理时，ContactDetails上会发出transferFund（）函数，它将向Mobx存储（与后端通信）上已登录的用户“移动”添加新移动。当我触发事务时，商店正在更新，但是呈现的事务列表仅在刷新时才被修改。为什么它不反应？顺便说一句，我正在使用“ react-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);

共享的可变状态不会在组件上更新

0 个答案: