reactjs - 无法将 api 和个人输入放入一个对象数组中，并且我的 datamap.map 无法呈现
问题描述
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 +自己的输入（名称和地址）将其全部保存到一种状态+我无法将它加载为地图而不是功能的allData.map呈现。扩展运算符似乎也有错误。对不起，这个项目是我第一次从头开始，到目前为止我所知道的 .env 的上述代码的关键来自 https://rapidapi.com/jchbasco/api/axie-infinity
解决方案
import React, { useState, useEffect } from 'react';
import {
FormControl,
Form,
Button,
Container,
Card,
Row,
Col,
} from 'react-bootstrap';
import { nanoid } from 'nanoid';
import axios from 'axios';
import * as usertz from 'user-timezone';
import './card.css';
import slp from '../assets/SLP.png';
import ronin from '../assets/ronin.png';
const AxieAPI = () => {
const [price, setPrice] = useState([{ current_price: '' }]);
const [addFormData, setAddFormData] = useState({
myName: '',
roninAddress: '',
manager: '',
scholar: '',
});
const [dataAll, setDataAll] = useState([
{
id: '0',
myName: '',
manager: '',
scholar: '',
roninAddress: '',
priceResult: '',
data: {
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: '',
},
},
},
]);
const baseURL =
'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=smooth-love-potion&order=market_cap_desc&per_page=100&page=1&sparkline=false';
useEffect(() => {
async function fetchData() {
await axios.get(baseURL).then((response) => {
// eslint-disable-next-line
response.data.map((pri) => {
const answer = pri.current_price;
setPrice(answer);
});
});
}
fetchData();
// eslint-disable-next-line
}, [dataAll]);
const userAddress = addFormData.roninAddress.slice(6);
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 = async (e) => {
// setRoninAddress(e.target.value);
await e.preventDefault();
try {
const fieldName = e.target.getAttribute('name');
const fieldValue = e.target.value;
const newFormData = { ...addFormData };
newFormData[fieldName] = fieldValue;
setAddFormData(newFormData);
} catch (error) {
console.log(error);
}
};
const onSubmitHandler = async (e) => {
await e.preventDefault();
await axios
.request(options)
.then(function (response) {
const newUser = {
id: nanoid(),
myName: addFormData.myName,
roninAddress: addFormData.roninAddress,
manager: addFormData.manager,
scholar: addFormData.scholar,
data: response.data,
};
const newUsers = [...dataAll, newUser];
setDataAll(newUsers);
})
.catch(function (error) {
console.error(error);
});
e.target.reset();
console.log(dataAll);
};
let totalSLP = dataAll.slice(1).reduce(async function (accumulator, item) {
try {
return accumulator + item.data.walletData.total_slp;
} catch (error) {
console.log(error);
}
}, 0);
console.log(totalSLP);
return (
<div>
<Container className="p-4">
<Form onSubmit={onSubmitHandler}>
<Row className="mb-3">
<Form.Group as={Col} sm={12} lg={6}>
<Form.Label>Scholar Name</Form.Label>
<FormControl
aria-label="Small"
aria-describedby="inputGroup-sizing-sm"
name="myName"
onChange={onChangeHandler}
/>
</Form.Group>
<Form.Group as={Col} sm={12} lg={6}>
<Form.Label>Ronin Address</Form.Label>
<FormControl
aria-label="Small"
aria-describedby="inputGroup-sizing-sm"
// value={roninAddress}
placeholder="ronin:12345-54321"
name="roninAddress"
onChange={onChangeHandler}
/>
</Form.Group>
</Row>
<Row>
<Form.Group as={Col} sm={12} lg={6}>
<Form.Label>Manager %</Form.Label>
<FormControl
aria-label="Small"
aria-describedby="inputGroup-sizing-sm"
name="manager"
type="number"
onChange={onChangeHandler}
/>
</Form.Group>
<Form.Group as={Col} sm={12} lg={6}>
<Form.Label>Scholar %</Form.Label>
<FormControl
aria-label="Small"
aria-describedby="inputGroup-sizing-sm"
name="scholar"
type="number"
onChange={onChangeHandler}
/>
</Form.Group>
</Row>
<div className="d-grid gap-2 pt-3">
<Button type="submit" size="lg">
Add User
</Button>
</div>
</Form>
<Container>
<Row>
{dataAll.slice(1).map((singleData) => {
const unixTimeStamp =
singleData.data.walletData.next_claim_timestamp;
const dateTimeFormat = 'MMMM Do, YYYY h:mm ss A';
const datetime = usertz.datetime(unixTimeStamp, dateTimeFormat);
const totalslp = singleData.data.walletData.total_slp;
const scholar = singleData.scholar;
const manager = singleData.manager;
const answerScholar = (totalslp * scholar) / 100;
const answerManager = (totalslp * manager) / 100;
const totalusdslp = price * totalslp;
const newtotalusdslp = totalusdslp.toFixed(2);
const managerusd = price * answerManager;
const newmanagerusd = managerusd.toFixed(2);
const scholarusd = price * answerScholar;
const newscholarusd = scholarusd.toFixed(2);
return (
<Card
style={{
width: '21rem',
backgroundColor: 'rgba(255, 255, 255, 0.105)',
borderRadius: '15px',
}}
className="main-css m-1 mt-5"
as={Col}
lg={4}
key={singleData.id}
>
<Card.Body>
<Card.Title>
<h3 className="py-3">{singleData.myName}</h3>
</Card.Title>
<Card.Subtitle className="mb-2 text-truncate">
<img src={ronin} alt="ronin" height="30px" />{' '}
{singleData.roninAddress}
</Card.Subtitle>
<Card.Text
style={{ width: '100%' }}
className="text-justify text-center"
>
Last SLP Claim -{' '}
{singleData.data.walletData.last_claim_amount}
<img src={slp} alt="slp" height="20px" />{' '}
</Card.Text>
<div
className="bg-secondary p-3 text-white text-center"
style={{ borderRadius: '10px' }}
>
<Card.Text>
Manager: {answerManager}
<img src={slp} alt="slp" height="20px" />
<br /> $ USD {newmanagerusd}
</Card.Text>
<hr />
<Card.Text>
Scholar: {answerScholar}
<img src={slp} alt="slp" height="20px" />
<br /> $ USD {newscholarusd}
</Card.Text>
</div>
<div className="py-3 text-center">
<h3>
<img src={slp} alt="slp" height="35px" />
{singleData.data.walletData.total_slp} SLP <br />
</h3>
<p>$ USD {newtotalusdslp}</p>
</div>
<Card.Text className="text-center">
Yesterday :{' '}
{singleData.data.walletData.calendar.yesterdayDelta}
<img src={slp} alt="slp" height="20px" />
<br />
Today : {singleData.data.walletData.calendar.delta}
<img src={slp} alt="slp" height="20px" />
</Card.Text>
<hr />
Next Claim
<br />
{datetime}
<Row>
<Card.Text as={Col} className="text-warning">
⚔️MMR {singleData.data.walletData.pvpData.elo}
</Card.Text>
<Card.Text as={Col} className="text-warning">
Rank {singleData.data.walletData.pvpData.rank}
</Card.Text>
</Row>
</Card.Body>
</Card>
);
})}
</Row>
</Container>
</Container>
</div>
);
};
export default AxieAPI;
这是我用上述修复完成的最新版本，但对于 {singleData.data.walletData.last_claim_amount} 仍有一些异步，有时仍会返回错误有时不会
推荐阅读
- java - 是否有可能改变javers的历史？
- node.js - Glitch 上的 NodeJS 应用程序未连接到远程 SQL Server
- python - 对于未满足的每个条件，从列表中删除多个项目
- vue.js - 如何在nuxt中使用“Vue-infinite-loading”而不通过axios加载数据？
- java - 在同一个标签中大摇大摆地分组控制器
- node.js - 如何从 Heroku 应用程序访问本地机器的串行端口 (USB) 数据？
- jenkins - Jenkins Environment Dashboard 保留数据超过 30 天
- automation - 使用 jmeter maven 插件测试订单执行
- html - 如何修复 pattern="[A-Za-z]" 输入字段
- azure-ad-b2c-custom-policy - 如何从令牌中提取包含 json 数组的 B2C 自定义声明