React hooks - OnClick 只显示被点击的项目答案

【问题标题】：React hooks - OnClick show only the clicked itemReact hooks - OnClick 只显示被点击的项目
【发布时间】：2019-11-03 13:24:11
【问题描述】：

我希望，如果我单击其中一个用户的按钮，则会触发第二个 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(...)：渲染没有返回任何内容。这通常意味着缺少返回语句。或者，什么也不渲染，返回空值。

我的代码有什么问题？

【问题讨论】：

UserTile 函数不返回任何内容。使用 vs code 时，您的编辑器应该在尝试运行代码之前已经告诉您。
您应该更改从 UserTile 组件返回的逻辑。你错过了回报。

标签： reactjs

【解决方案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);

【讨论】：

【解决方案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>
      )
    }
  })
</>)

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

【讨论】：