【发布时间】：2021-09-09 23:34:36
【问题描述】：
import React, { useState, useEffect } from 'react';
import {
FormControl,
Form,
InputGroup,
Button,
Container,
} from 'react-bootstrap';
import { nanoid } from 'nanoid';
import axios from 'axios';
import * as usertz from 'user-timezone';
const AxieAPI = () => {
const [dataAll, setDataAll] = useState([
{
id: '',
myName: '',
roninAddress: '',
walletData: {
adventureSLP: '',
calendar: {
delta: '',
todaySLP: '',
yesterdayDelta: '',
yesterdaySLP: '',
},
claim_timestamp: '',
ingame_slp: '',
last_claim_amount: '',
lastupdate: '',
next_claim_timestamp: '',
pvpData: {
elo: '',
rank: '',
},
ronin_slp: '',
total_slp: '',
},
},
]);
useEffect(() => {
console.log(dataAll);
}, [dataAll]);
const userAddress = dataAll.roninAddress;
var options = {
method: 'GET',
url: `https://axie-infinity.p.rapidapi.com/get-final-data/0x${userAddress}`,
params: { id: `0x${userAddress}` },
headers: {
'x-rapidapi-host': process.env.REACT_APP_HOST,
'x-rapidapi-key': process.env.REACT_APP_KEY,
},
};
const onChangeHandler = (e) => {
// setRoninAddress(e.target.value.substring(6));
e.preventDefault();
const fieldName = e.target.getAttribute('name');
const fieldValue = e.target.value;
const newFormData = { ...dataAll };
newFormData[fieldName] = fieldValue;
};
const onSubmitHandler = async (e) => {
e.preventDefault();
await axios
.request(options)
.then(function (response) {
const newUser = {
id: nanoid(),
myName: dataAll.name,
roninAddress: dataAll.roninAddress,
};
let arr = response.data;
const newUsers = [...dataAll, newUser, arr];
setDataAll(newUsers);
})
.catch(function (error) {
console.error(error);
});
console.log(dataAll);
};
return (
<div>
<Container className="p-5">
<Form onSubmit={onSubmitHandler}>
<FormControl
aria-label="Small"
aria-describedby="inputGroup-sizing-sm"
name="myName"
onChange={onChangeHandler}
/>
<InputGroup className="mb-3">
<InputGroup.Text id="basic-addon1">ronin:</InputGroup.Text>
<FormControl
aria-label="Small"
aria-describedby="inputGroup-sizing-sm"
// value={roninAddress}
name="roninAddress"
onChange={onChangeHandler}
/>
<Button type="submit">Add User</Button>
</InputGroup>
</Form>
<div>
{/* <p>Last Claim Amount : {data.walletData.last_claim_amount}</p>
<p>Yesterday Earn SLP: {data.walletData.calendar.yesterdaySLP}</p>
<p>Total SLP : {data.walletData.total_slp}</p>
<p>Today Adv SLP ?/50: {data.walletData.adventureSLP}</p>
<p>Rank : {data.walletData.pvpData.rank}</p>
<p>MMR : {data.walletData.pvpData.elo}</p>
<p>Next Claim : {datetime}</p> */}
{/* {dataAll.map((singleData) => {
const unixTimeStamp = singleData.walletData.next_claim_timestamp;
const dateTimeFormat = 'MMMM Do, YYYY h:mm ss A';
const datetime = usertz.datetime(unixTimeStamp, dateTimeFormat);
return (
<div>
<p>User Name : {singleData.name}</p>
<p>
Last Claim Amount : {singleData.walletData.last_claim_amount}
</p>
<p>
Yesterday Earn SLP:{' '}
{singleData.walletData.calendar.yesterdaySLP}
</p>
<p>Total SLP : {singleData.walletData.total_slp}</p>
<p>Today Adv SLP ?/50: {singleData.walletData.adventureSLP}</p>
<p>Rank : {singleData.walletData.pvpData.rank}</p>
<p>MMR : {singleData.walletData.pvpData.elo}</p>
<p>Next Claim : {datetime}</p>
</div>
);
})} */}
{dataAll.slice(1).map((data) => {
return <p key="{item}">User Name : {data.name}</p>;
})}
</div>
</Container>
</div>
);
};
export default AxieAPI;
当console.log 被分离出来时，我无法使用API + 自己的输入（名称和地址）在dataAll 下将它全部保存到一个状态+ 我无法渲染它加载为地图而不是功能的allData.map。扩展运算符似乎也有错误。对不起，这个项目是我第一次从头开始，到目前为止我所知道的 .env 上述代码的关键来自 https://rapidapi.com/jchbasco/api/axie-infinity
【问题讨论】：
标签： reactjs react-hooks