反應鈎子 - OnClick 只顯示點擊的項目

Question

我希望如果我單擊其中一個用戶的按鈕，則會觸發第二個 Ajax 調用並僅顯示該用戶，該用戶被單擊。

為此，我嘗試了以下方法：

import React, { useState, useEffect } from 'react'

function UserTile ({ setID, newID }) {    
  const [resources, setResources] = useState([])

  const fetchResource = async (setID) => {
    const response = await axios.get(
      'https://api.randomuser.me/'
    )
    console.log(response.data.results)
    setResources(response.data.results)
  }

  useEffect(() => {
    fetchResource()
  }, [])

  resources.map((item) => {
    if (item.login.uuid === newID) {
      return (
        <div className='card__item'>
          <h2 className='card__title'>{item.name.first} {item.name.last}</h2>
          <button className='btn--tile' onClick={() => setID(null)}>Back to overview</button>
              Details
        </div>
      )
    }
  })
}

export default UserTile

但是，如果我單擊其中一個用戶的按鈕，而不是只看到該用戶，我會收到以下錯誤：

未捕獲的錯誤：UserTile(...)：渲染沒有返回任何內容。 這通常意味着缺少 return 語句。 或者，不渲染任何內容，返回 null。

我的代碼有什么問題？

Answer 1

我不明白您提出的問題試圖達到什么目的。 但是通過查找您的代碼，它應該被優化並按照以下方式完成！

    import React, { useState, useEffect, useCallback, memo } from "react";
    import axios from "axios";

    const UserTile = ({ setID, newID }) => {
      const [resources, setResources] = useState([]);

      const fetchResource = useCallback(async () => {
        const response = await axios.get("https://api.randomuser.me/");
        setResources(response.data.results);
      }, []);

      useEffect(() => {
        fetchResource();
      }, [fetchResource]);

      const filteredResources = resources.filter(item => item.login.uuid === newID);

      if (filteredResources.length === 0) {
        return null;
      }

      return (
        <div className="card__item">
          <h2 className="card__title">
            {filteredResources.name.first} {filteredResources.name.last}
          </h2>
          <button className="btn--tile" onClick={() => setID(null)}>
            Back to overview
          </button>
          Details
        </div>
      );
    };

    export default memo(UserTile);

Answer 2

你應該在這一點上

  resources.map((item) => {
    if (item.login.uuid === newID) {
      return (
        <div className='card__item'>
          <h2 className='card__title'>{item.name.first} {item.name.last}</h2>
          <button className='btn--tile' onClick={() => setID(null)}>Back to overview</button>
              Details
        </div>
      )
    }
  })

替換為

return (<>
  resources.map((item) => {
    if (item.login.uuid === newID) {
      return (
        <div className='card__item'>
          <h2 className='card__title'>{item.name.first} {item.name.last}</h2>
          <button className='btn--tile' onClick={() => setID(null)}>Back to overview</button>
              Details
        </div>
      )
    }
  })
</>)

並且可能使用過濾器而不是 map