reactjs - 如何防止在用户输入反应之前从 API 加载数据?
问题描述
我想显示来自 API 的数据,用户输入将成为 API URL 的一部分。更准确地说,目标是让用户输入一个 ETH 钱包地址,并使用Opensea API显示这个钱包拥有的 NFT 资产。
我的问题是在用户提交输入之前获取并显示数据。(它也是一个有效的 api url,但不是我想要获取的数据)。
如何解决这个问题?我认为一种方法是保持提交的布尔状态,并且仅在它为真时显示。但是这样一来,尽管没有渲染,它仍然会进行 api 调用。有没有更好的办法?我为所有者设置的初始状态是否重要?
我的猜测是需要一个异步函数,并且 api fetch 是回调。触发器是用户输入事件。我不确定如何构建它。
下面是我的代码。
import { useState, useEffect } from "react";
// example user input: 0x147412d494731cbb91dbb5d7019464a536de04dc
function App() {
const [data, setData] = useState({ assets: [] });
const [enteredWallet, setEnteredWallet] = useState("");
const [owner, setOwner] = useState("");
const walletChangeHandler = (event) => {
setEnteredWallet(event.target.value);
};
const submittedHandler = (event) => {
event.preventDefault();
setOwner(enteredWallet);
console.log(enteredWallet);
};
useEffect(() => {
fetch(
`https://api.opensea.io/api/v1/assets?owner=${owner}&order_direction=desc&offset=0&limit=10`
)
.then((res) => {
return res.json();
})
.then((data) => {
setData(data);
});
}, []);
return (
<div className="App">
<header className="App-header">
<h3>Show me assets in this wallet</h3>
<form onSubmit={submittedHandler}>
<input
placeholder="wallet address"
value={enteredWallet}
onChange={walletChangeHandler}
/>
<button>Submit</button>
</form>
<div>
{data.assets.map((i, index, k) => (
<li key={index}>{i.name}</li>
))}
</div>
</header>
</div>
);
}
export default App;
ps 我知道这个 fetch api 调用不是最好的方法。这只是为了我的锻炼。
在单独的说明中,我还收到一条警告消息“react Hook useEffect 缺少依赖项:'owner'。要么包含它,要么删除依赖项数组 react-hooks/exhaustive-deps” 任何线索?
解决方案
它可能看起来像
const [data, setData] = useState()
const [owner, setOwner] = useState()
useEffect(() => {
if(owner){
fetch(...).then(setData)
}
}, [owner])
return data ? <>something with data goes here</> : <>Loading...</>
推荐阅读
- r - 在 R 中重命名多列的简化方法
- scala - scala spark获取每个时间间隔的平均值
- postman - Newman - 在每个测试脚本/测试用例之前运行特定操作
- corda - 在运行时修改 Corda 服务对象的行为
- sharepoint - SSRS - 动态数据条
- python - 线性回归是否适用于分类自变量和连续因变量?
- php - 如何重写我的正则表达式以匹配正确的用户昵称?
- spring - Spring Integration Mail Google IMAP 如何设置收件箱的检查频率
- java - java求矩形和正方形的面积
- c# - WPF - 对象的列表到 DataGrid 中自己的组合框列