如何使用swagger.io和reactJs删除宠物

Question

我有一个考试，我必须使用服务器swagger.io作为后端创建一个reactJs前端应用程序。我的主要问题是我不知道如何获得所有宠物的列表，这就是为什么我创建了一个包含一些数据的json文件。但是当我试图删除一只宠物时，我得到了一个错误：deletehttp://petstore.swagger.io/v2/pet/2net:：ERR_FAILED。这是代码：

async function deleteOperation(petId) {
let result = await fetch(`http://petstore.swagger.io/v2/pet/${petId}`,{
method: "DELETE"
});
result = await result.json()
}
return (
<div style={{display: 'flex', flexDirection: 'row'}}>
{  data && data.length>0 && data.map((item)=>
<div className="card" style={{width: 18 +'rem'}}>

<img src={item.photoUrls} className="card-img-top" alt="..." style={{width:200, height:200}}/>
<div className="card-body">
<h5 class="card-title">    
<p>{item.name}</p>

</h5>
<p className="card-text">{item.status}</p>
<p>{item?.categorie?.name}</p>
<span onClick={() => deleteOperation(item.id)}>
<p>delete</p>
</span>
<a href="#" className="btn btn-primary"> </a>
</div>
</div>          
)}
</div>
);

我想问是否有人知道如何显示存储在swagger.io中的宠物，因为当我添加新宠物时，我在显示数据时会遇到问题。如果你们中的任何人有解决删除问题的想法，我将非常感谢

Answer 1

经过探索，我发现没有直接的端点可以获取宠物列表。在搜索这个问题时，我遇到了https://erichealdwebb.net/wiki/swagger-retrieve-list-of-pets-by-status，其中宠物列表是基于查询参数status.返回的。因此，可以使用此方法列出available,、pending,和sold宠物。另外，您使用的是HTTP版本，它抛出了CORS错误(您现在面临的错误是net::ERR_FAILED.(。使用第三方URL时请小心，并且始终倾向于使用HTTPS.。您没有获取pets.的方法。此外，您正在从delete函数返回JSX。对于这个用例，您可以使用useState钩子。我看到您正在<h5>和<span>标签中嵌套<p>。您可以直接使用<p>标记或<h1>和<span>标记。最后，你的代码应该是这样的，

<div id="root"></div>
<script
src="https://unpkg.com/@babel/standalone/babel.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/react@18/umd/react.production.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
crossorigin
></script>
<script type="text/jsx">
const App = () => {
const url = "https://petstore.swagger.io/v2/pet";
const [pets, setPets] = React.useState([]);
const [errorState, setError] = React.useState();
const [loading, setLoading] = React.useState(true);
const fetchPetsByStatus = async (status) => {
setLoading(true);
try {
const response = await fetch(
`${url}/findByStatus?status=${status || "available"}`,
{
method: "GET",
mode: "cors",
headers: {
"Content-Type": "application/json",
},
}
);
const data = await response.json();
if (!response.ok) throw new Error(data.message);
setPets(data);
} catch (error) {
setError(error.message);
throw new Error(error);
} finally {
setLoading(false);
}
};
const deletePet = async (petId) => {
try {
const result = await fetch(
`https://petstore.swagger.io/v2/pet/${petId}`,
{
method: "DELETE",
}
);
const data = await result.json();
if (data.code === 200) {
alert("deleted");
fetchPetsByStatus();
}
} catch (error) {
throw new Error(error);
}
};
React.useEffect(() => {
fetchPetsByStatus(/* here you can pass options like 'available', 'pending', and 'sold'*/);
}, []);
return (
<div
style={{
padding: "16px",
}}
>
{loading && <h1>Loading</h1>}
{errorState && errorState}
{pets &&
pets.length > 0 &&
pets.map((pet, ind) => (
<div
key={ind}
className="card"
style={{ margin: 16, width: 18 + "rem" }}
>
<img
src={pet.photoUrls}
className="card-img-top"
alt="..."
style={{ width: 200, height: 200 }}
/>
<div className="card-body">
<h5 className="card-title">{pet.name}</h5>
<p className="card-text">{pet.status}</p>
<p>{pet?.category?.name}</p>
<button onClick={() => deletePet(pet.id)}>delete</button>
</div>
</div>
))}
</div>
);
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
</script>

这不是最好的解决方案，也不是完美的解决方案。还有很多其他方式。我添加了ReactJS的loading和"错误states for you to get a better understanding of the反应性"。这只是我的偏好或我的方法。

希望我能帮上忙：(