Компонент отображает не весь контент

Question

Я пытался создать компонент, который будет возвращать всю информацию из Smart Contract (библиотека web3) и возвращать ее.Когда я захожу на страницу, возвращающую содержимое этого компонента, я не вижу свой контент из Smart Contract.Он будет возвращаться с небольшой задержкой, и если я дважды захожу на одну и ту же страницу, я вижу свой контент.

export default class MyUsers extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            tokens: [],
            users: []
        };
    }

    componentDidMount() {
        var owner = this.props.match.params.username;
        var that = this;

        window.smartContract.methods.tokensOfOwner(owner).call().then(function (tokens) {
            tokens.map((data, idx) => {
                that.state.tokens.push(data);

                // Get hero data
                window.smartContract.methods.getUsers(data).call().then(function (userData) {

                    userData.userid = data;
                    that.state.users.push([userData]);
                });
                return true;
            });
        });

    }

    renderUsers() {
        const that = this;
        const getUsersInformation = this.state.users.map((data, idx) => {
            console.log(data);
            var birthTime = new Date(parseInt(data[0].birthTime) * 1000);
            return (
                <div className="col-md-4" key={idx.toString()}>

                    <Card>
                        <CardBody>
                            <CardTitle className="mb-0">
                                <h4 className="mb-0">User No. <strong>{ data[0].userid }</strong></h4>
                            </CardTitle>
                            <CardSubtitle>
                                <small>ID No. <strong>{ data[0].id }</strong></small>
                            </CardSubtitle>
                            <hr />
                            <Table>
                                <tbody>
                                    <tr>
                                        <td className="font-weight-bold">Birthdate:</td>
                                        <td>{ birthTime.getFullYear() }-0{ birthTime.getMonth() + 1 }-0{ birthTime.getDay() + 1 }</td>
                                    </tr>
                                </tbody>
                            </Table>
                        </CardBody>
                    </Card>
                </div>
            );
        });
        return getUsersInformation;
    }

    render() {

        return (
            <Card>
                <CardBody>
                    <CardTitle>
                        <h3>My Users</h3>
                    </CardTitle>
                    <hr />
                    <div className="row">
                        {this.renderUsers()}
                    </div>
                </CardBody>
            </Card>
        );
    }
}

Answer 1

Используйте setState вместо помещения элемента в массив:

Никогда не изменяйте this.state напрямую, так как впоследствии вызов setState () может заменить мутацию, которую вы сделали. Относитесь к этому состоянию как к неизменны.

componentDidMount() {
    var owner = this.props.match.params.username;
    //var that = this;

    window.smartContract.methods.tokensOfOwner(owner).call().then(tokens => {
        tokens.map((data, idx) => {
            //that.state.tokens.push(data);
            this.setState({tokens: [...this.state.tokens, data]})

            // Get hero data
            window.smartContract.methods.getUsers(data).call().then(userData => {

                userData.userid = data;
                //that.state.users.push([userData]);
                this.setState({users: [...this.state.users, userData]})
            });
            return true;
        });
    });

}

Ссылка: https://reactjs.org/docs/react-component.html#state