React首次提交用户输入未生效导致API请求返回错误数据问题

React 的 useState 状态更新是批量异步执行的，同一事件循环内调用 setState 后，立刻读取对应状态拿到的还是更新前的旧值。
你在提交逻辑中先执行了setOwner(enteredWallet)，之后立刻调用fetchNFTHandler，此时owner还是初始的空字符串，所以拼接出的请求 URL 是错误的。第二次提交时，owner已经存储了上一次提交时设置的数值，所以才能正常请求到目标数据。

两种常用修复方案，按需选择即可：

方案1：直接传参发起请求（推荐） #

不需要依赖owner状态，提交时直接拿已经是最新值的enteredWallet作为参数传给请求方法即可，逻辑最简单高效。
修改后的完整代码：

import { useState } from "react";

// 示例输入:  0x147412d494731cbb91dbb5d7019464a536de04dc

function App() {
  const [data, setData] = useState([]);
  const [enteredWallet, setEnteredWallet] = useState("");
  // 如果没有其他场景需要用到owner状态，可以直接删掉这个状态
  const [owner, setOwner] = useState("");

  const walletChangeHandler = (event) => {
    setEnteredWallet(event.target.value);
  };

  const submittedHandler = (event) => {
    event.preventDefault();
    setOwner(enteredWallet);
    // 直接传入最新的输入值发起请求
    fetchNFTHandler(enteredWallet);
  };

  // 新增参数接收钱包地址
  function fetchNFTHandler(walletAddress) {
    fetch(
      `https://api.opensea.io/api/v1/assets?owner=${walletAddress}&order_direction=desc&offset=0&limit=10`
    )
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        const transformedData = data.assets.map((element, index) => {
          return {
            title: element.name,
            id: index,
          };
        });
        setData(transformedData);
      });
  }

  return (
    <div className="App">
      <header className="App-header">
        <h3>查询该钱包地址下的资产</h3>
        <form onSubmit={submittedHandler}>
          <input
            placeholder="钱包地址"
            value={enteredWallet}
            onChange={walletChangeHandler}
          />
          <button>提交</button>
        </form>
        <div>
          {data.map((element) => (
            <li key={element.id}>{element.title}</li>
          ))}
        </div>
      </header>
    </div>
  );
}

export default App;

方案2：通过useEffect监听状态触发请求 #

如果你后续有其他业务逻辑需要用到owner状态，可以监听owner的变化，等状态更新完成后自动发起请求。
核心修改点：

import { useState, useEffect } from "react";

// ...其余代码保持不变

const submittedHandler = (event) => {
  event.preventDefault();
  setOwner(enteredWallet);
  // 删掉此处的fetch调用
};

// 新增useEffect监听owner变化
useEffect(() => {
  // 避免空值发起无效请求
  if (owner) {
    fetchNFTHandler();
  }
}, [owner])

// ...其余代码保持不变

内容的提问来源于stack exchange，提问作者somniumm