尝试从 API 检索头像图像，但收到头像未定义的错误

Question

userData 是一个使用 getUserByChainAccount 从 API 接收用户数据的函数。 getUserByChainAccount 需要一个用户名，在本例中是从买家动态检索的。

我对 avatar 感兴趣，但我不断收到以下错误未处理的运行时错误 ReferenceError：头像未定义

function UserTransactionsComponent() {
  const [sales, setSales] = useState();

  useEffect(() => {
    async function fetchData() {
      const res = await fetch(
        'https://proton.api.atomicassets.io/atomicmarket/v1/sales'
      );
      const { data } = await res.json();
      setSales(data);
    }
    fetchData();
  }, []);

  if (!sales) {
    return (
      <div>
        <Spinner />
      </div>
    );
  }

  return (
    <PageLayout>
      <ul>
        {sales.map((result) => {
          const {
            sale_id,
            buyer,
            seller,
            listing_price,
            listing_symbol,
            created_at_time,
          } = result;
          const userData = async (buyer) => {
            const user = await proton.getUserByChainAccount(buyer);
            const { name, avatar } = user;
          };

          function HandleBuyerClick() {
            window.location = '/user/' + buyer;
          }
          function HandleSellerClick() {
            window.location = '/user/' + seller;
          }

          if (buyer !== null) {
            return (
              <Card>
                <li key={sale_id}>
                  <h3>
                    <Transaction>
                      {avatar}
                      <Button onClick={HandleSellerClick}>{seller}</Button>
                    </Transaction>{' '}
                    just sold item number
                    <Transaction>
                      <Button>{sale_id}</Button>
                    </Transaction>{' '}
                    to{' '}
                    <Transaction>
                      <Button onClick={HandleBuyerClick}>{buyer}</Button>
                    </Transaction>{' '}
                    for <Transaction>{formatNumber(listing_price)}</Transaction>{' '}
                    {listing_symbol} at {parseTimestampJM(created_at_time)}
                  </h3>
                </li>
              </Card>
            );
          }
        })}
      </ul>
    </PageLayout>
  );
}

export default UserTransactionsComponent;

Answer 1

在渲染期间发出 API 请求是一个众所周知的坏主意。 React 可能会因各种原因重新渲染，例如此组件或任何更新其状态的父组件。在每次渲染时一遍又一遍地重新请求相同的 API 结果是愚蠢的。更不用说尝试将异步操作硬塞到渲染操作中将是困难且容易出错的。

此类请求应在加载组件时发出，并且结果应存储在状态中。

在这种情况下，您最好的选择可能是创建一个完全独立的组件来在 .map() 操作中呈现，并向该组件传递发出 API 请求所需的内容。例如，考虑这样的 .map()：

{sales.map((result) => {
  return <SomeOtherComponent result={result} />
})}

然后在该组件中，您将处理 API 调用并管理该调用结果的状态。例如，在 SomeOtherComponent 中，您可以这样做：

const {
  sale_id,
  buyer,
  seller,
  listing_price,
  listing_symbol,
  created_at_time,
} = props.result;

const [avatar, setAvatar] = useState(''); // <-- define the state here

useEffect(() => {
  const userData = async (buyer) => {
    const user = await proton.getUserByChainAccount(buyer);
    const { name, avatar } = user;
    setAvatar(avatar); // <--- update the state here
  };
  userData();
}, []);

// define your click handlers as you already do here

// return your JSX markup as you already do here