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

此时您应该拥有

  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>
      )
    }
  })
</>)

，并且可能使用filter而不是地图

Answer 2

我不明白您通过提出的问题想要达到的目标。但是，通过查找您的代码，应该对其进行优化并按照以下方式完成！


    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);

React钩子-OnClick仅显示单击的项目

2 个答案: