使用powerball-picker

Question

我正在开始使用reactJS并正在构建简单的应用程序以获得经验。现在我正在构建一个非常基本的应用程序，它可以生成强力球数字并在用户点击按钮时显示它们。我的问题是我似乎无法弄清楚如何从random.org API获取数据并将其显示为我的组件中的字符串。我可以看到控制台中的数字完全正常，并且它在那里工作。我非常肯定基于React给我的错误我需要将对象数据转换为数组。任何帮助将不胜感激。

App.js

import React, {Component} from 'react';
import Powerball from './Powerball/Powerball';
import './App.css';


class App extends Component {
state = {
    theNumbers: [
        {id: 'one', numbers: '', powerball: ''}
    ],
    showNumbers: false
}

powerballNumbersGetter = () => {
    const doesShow = this.state.showNumbers;
    this.setState({
        showNumbers: !doesShow
    });
}


render() {

    let numbers = null;
    if (this.state.showNumbers) {
        numbers = (
            <div>
                <Powerball/>
            </div>
        );
    }


    return (
        <div className="App">
            <p>TEST</p>
            <button

                onClick={this.powerballNumbersGetter}>Click to get Powerball 
               Numbers
            </button>
            {numbers}
        </div>
    );
    }
}

export default App;

Powerball.js

import React from 'react';

const powerball = (props) => {

var powerball = require('powerball-picker');
var apiKey = "xxxxxxxxxxxxxxxxxxxxxxxxxx" // obtained from 
Random.org API
var client = new powerball(apiKey);
client.pickPowerball(data => {
    console.log(data.numbers + " " + data.powerball);
});

return (
    <div>
        <p>You're Random Powerball numbers are (powerball numbers go here) 
and the powerball is (powerball
            here) </p>

    </div>
)
};

export default powerball;