Swapi API按性别过滤字符

Question

我需要一些小帮助。我是JS的新手，我需要有关swapiapi的帮助。我有：

fetch('https://swapi.dev/api/people/').then((response) => response.json()).then((response) =>{
console.log(response)
})

现在我需要从中过滤它，并使数组中的所有男性角色与女性角色相同。

我的问题是如何使用过滤器和地图？

Answer 1

过滤器、等样品

• 我们将数据设置为API响应后的状态
• 我们有另一个状态来捕捉选定的性别，我们使用派生状态来过滤每个渲染计算的性别(可以使用useMemo进行优化，但对于测试数据，这样做还为时过早，tbh(

const { useState, useEffect } = React;
const App = () => {
const [data, setData] = useState([]);
const [gender, setGender] = useState();
useEffect(() => {
fetch("https://swapi.dev/api/people/")
.then((response) => response.json())
.then((response) => {
setData(response.results);
});
}, []);
const filtered = gender ? data.filter((d) => d.gender === gender) : data;
return (
<div>
<select onChange={(e) => setGender(e.target.value)}>
<option value="">All</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<hr></hr>
{ (data && data.length) > 0 ? filtered.map((d) => (
<p key={d.name}>
{d.name} - {d.gender}
</p>
)) : "loading...."}
</div>
);
};
ReactDOM.createRoot(document.getElementById("root")).render(<App />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>