返回json对象到呈现方法-react.js

我正在消耗 pokeapi 为了一个私人项目,想在做的时候学会反应。一旦成功地从api中检索到所需的信息,如下所示:

handleSubmit(event) {

        axios.get('https://pokeapi.co/api/v2/pokemon/' + this.state.input_id).then(r => {

            var data = r.data;
            var types = [];
            for (let i = 0; i < data.types.length; i++) types.push(data.types[i].name);

            const pokemon = {
                id: data.id,
                name: data.name,
                sprite: data.sprites.front_default,
                height: data.height,
                weight: data.weight,
                types: types,
            };

            this.setState({
                pokemon: pokemon
            });

        }).catch(e => {

            console.log(e);

        }); // axios

        event.preventDefault();

    } // handleSubmit

我只想渲染这个神奇宝贝。我现在就是这样做的:

render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Pokemon's id
                        <input type="text" value={this.state.input_id} onChange={this.handleChange} />
                    </label>
                    <input type="submit" value="Find!"/>
                </form>
                <code>{this.state.pokemon}</code>
            </div>
        );
    } // render

当然,这会引发下一个错误:

Objects are not valid as a React child (found: object with keys {id, name, sprite, height, weight, types}). If you meant to render a collection of children, use an array instead.

是否有方法在表中呈现此对象?我想这是没有保存州内的数据,但我不知道如何这样做。