Question

我试图从反应中的父对象打印数据。这是我的代码

import React from 'react';
import axios from 'axios';
class Wallet extends React.Component {
    constructor(){
        super();
        this.state = {
            wallets: [],
            updates: []
        };
    }
    componentDidMount(){
        var jwt = localStorage.getItem('jwt');
        axios.post('http://127.0.0.1:3000/api/wallet', {
                token: jwt,
                walletid: this.props.match.params.walletid
            })
            .then(response => {
                this.setState({wallets : response.data.data});
                console.log(this.state);
        });
    }
    render(){
        return (
            <div className="content">
                <h1>{this.state.wallets['name']}</h1>
                <div className="wallets">
                <table className="classic">
                        <thead>
                            <tr>
                                <th>Wallet</th>
                                <th>Balance</th>
                            </tr>
                        </thead>
                            <tbody>
                                <tr>

                                <td>{this.state.wallets.wallet_updates.xxx}- he</td>
                                </tr>
                    </tbody>
                    </table>
                </div>
            </div>
        )
    }
}

export default Wallet

我不知道为什么，但每当我调用wallet_updates.xxx时，它都说不能调用未定义的xxx，即使我已经检查过，它肯定存在于状态中。我也尝试将特定的子对象放在另一个状态对象中，但这似乎也不起作用。

Answer 1

这发生在我怀疑的第一个渲染上，你的状态树不正确。你已经将状态设置为Arrays，但是你正在使用它们就好像它们是对象。

这里，this.state.wallets.wallet_updates.xxx确实未定义。

更好的方法是创建一个更具代表性的初始状态。

this.state = {
    wallets: { name: 'n/a', wallet_updates: {} },
    updates: []
};

这将有助于您追捕更多错误，因为它更符合您尝试使用setState的内容。

状态变量的子对象不显示

1 个答案: