Question

首先，我显示了一个事务列表，当用户选择单个事务时，将使用URL中的事务ID打开新页面。在此页面上显示了交易的详细信息。下面的代码只是详细信息页面。它显示了所有正确的细节。

其中一个细节是0个或更多标签的列表，我希望能够编辑标签列表并保存结果。此时，我总是以干净的输入字段结束，我不明白如何使用现有的transaction['tags']数据填充此字段。

似乎transaction['tags']在页面呈现之前未初始化，我无法在constructor或componentDidMount中使用它。

我期望mapStateToProps中所述的交易对象可用，我可以将构造函数中的行从this.state = {value: ''};更改为this.state = {value: transaction['tags']}

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchTransaction } from '../actions';

class TransactionsIndex extends Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount() {
        const { _key } = this.props.match.params;
        this.props.fetchTransaction(_key);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }

    render() {
        const { transaction } = this.props;

        if (!transaction) {
            return <div>Loading...</div>;
        }

        let tags = null;

        tags =
            <div>
                <form onSubmit={this.handleSaveTagsclick}>
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                    <input type="submit" value="Submit" />
                </form>
            </div>

        // console.log(transaction['tags']);

        return (
            <div className="container">
                <div className="well">
                    <div>Transactiedatum: { transaction["Transactiedatum"] }</div>
                    <div>Valutacode: { transaction["Valutacode"] }</div>
                    <div>CreditDebet: { transaction["CreditDebet"] }</div>
                    <div>Bedrag: { transaction["Bedrag"] }</div>
                    <div>Tegenrekeningnummer: { transaction["Tegenrekeningnummer"] }</div>
                    <div>Tegenrekeninghouder: { transaction["Tegenrekeninghouder"] }</div>
                    <div>Valutadatum: { transaction["Valutadatum"] }</div>
                    <div>Betaalwijze: { transaction["Betaalwijze"] }</div>
                    <div>Omschrijving: { transaction["Omschrijving"] }</div>
                    <div>Type betaling: { transaction["Type betaling"] }</div>
                    <div>Machtigingsnummer: { transaction["Machtigingsnummer"] }</div>
                    <div>Incassant ID: { transaction["Incassant ID"] }</div>
                    <div>Adres: { transaction["Adres"] }</div>
                    <div>Status: { transaction["status"] }</div>
                    <div>Created: { transaction["created"] }</div>
                    {tags}
                </div>
                <Link to="/"><button type="button" className="btn btn-default">Back</button></Link>
            </div>
        );
    };
}

function mapStateToProps({ transactions }) {
    // console.log('transactions_selectedTransaction: ' + transactions['selectedTransaction']);
    return { transaction: transactions['selectedTransaction'] };
 }

export default connect(mapStateToProps, { fetchTransaction })(TransactionsIndex);

我找到了这个，但它对我没有帮助：Redux-form: Set form values from state 而这：How to get state / value from form component?

从状态加载表单值

0 个答案: