[英]React Hooks: useState with onClick only updating the SECOND time button is clicked?
[英]React hooks - OnClick show only the clicked item
我希望如果我单击其中一个用户的按钮,则会触发第二个 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。
我的代码有什么问题?
我不明白您提出的问题试图达到什么目的。 但是通过查找您的代码,它应该被优化并按照以下方式完成!
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);
你应该在这一点上
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.