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

Question

我想显示来自 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” 有什么线索吗？

Answer 1

它可能看起来像

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

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

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