如何防止在用户输入反应之前从 API 加载数据？

Posted 2023-02-18

【中文标题】如何防止在用户输入反应之前从 API 加载数据？

【英文标题】：How to prevent loading data from API before user input in react?

【发布时间】：2021-12-12 21:01:21

【问题描述】：

我想显示来自 API 的数据，用户输入将成为 API URL 的一部分。更准确地说，目标是让用户输入一个 ETH 钱包地址，并显示这个钱包拥有的 NFT 资产，使用Opensea API。

我的问题是在用户提交输入之前获取并显示数据。 （这也是一个有效的 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;

附言我知道这个 fetch api 调用不是最好的方法。这只是为了我的锻炼。

另外，我还收到一条警告消息“react Hook useEffect 缺少依赖项：'owner'。要么包含它，要么删除依赖项数组 react-hooks/exhaustive-deps” 有什么线索吗？

【问题讨论】：

关于缺少的依赖，看看这里***.com/questions/55840294/…和这里overreacted.io/a-complete-guide-to-useeffect

【参考方案1】：

它可能看起来像

const [data, setData] = useState()
const [owner, setOwner] = useState()

useEffect(() => 
  if(owner)
    fetch(...).then(setData)
  
, [owner])

return data ? <>something with data goes here</> : <>Loading...</>