React.js: Не удается экспортировать данные в CSV
По инструкции создал компонент, который экспортирует данные в csv. Однако, после нажатия на кнопку , консоль выдает ошибку Data should be a "String", "Array of arrays" OR "Array of objects". Суть понял, но руки из одного места...Какие идеи, товарищи? Заранее спасибо.
class AsyncCSV extends Component {
constructor(props){
super(props);
this.state={
data:[]
}
this.CSVLinkElement = React.createRef();
this.headers = [
{label: 'Address' , key:'address'},
{label: 'Balance', key:'final_balance'}
]
}
getUserList = async () => {
const res = await fetch("https://blockchain.info/multiaddr?active=3MQTRzttkMtsMEy9dRq4Sf1xiSsWKgQkyH|1BoatSLRHtKNngkdXEeobR76b53LETtpyT|bc1q9fmqhwjem6u5gp4c8mm02tdyyz58yt5mcklykp|bc1ql9na73jamylumxk7sts2u4859fxmlsjwk0hlxs");
return await res.json();
}
downloadReport = async () =>{
const data = await this.getUserList();
this.setState({data: data}, () =>{
setTimeout(() => {
this.CSVLinkElement.current.link.click();
})
} );
}
render(){
const {data} = this.state;
return <div >
<input className="export-button"
type="button"
value="Export to CSV"
onClick={this.downloadReport}
/>
<CSVLink
headers={this.headers}
data={data}
filename="Report.csv"
ref={this.CSVLinkElement}
/>
</div>
}
}
export default AsyncCSV
Второй компонент
export default class GetApiBalance extends Component{
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount(){
fetch("https://blockchain.info/multiaddr?active=3MQTRzttkMtsMEy9dRq4Sf1xiSsWKgQkyH|1BoatSLRHtKNngkdXEeobR76b53LETtpyT|bc1q9fmqhwjem6u5gp4c8mm02tdyyz58yt5mcklykp|bc1ql9na73jamylumxk7sts2u4859fxmlsjwk0hlxs")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result.addresses
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render(){
const{error, isLoaded, items} = this.state;
if (error){
return <p> ERROR {error.message} </p>
} else if (!isLoaded){
return <p> Loading </p>
} else {
return (
<ul className="balance_list">
{items.map(item =>(
<li className="balance_" key={item.addresses}>
Address: {item.address} <br/> Balance: {item.final_balance} btc
</li>
))}
</ul>
)
}
}
}