这个React代码可以通过哪些方式得到改进

Question

我是React的新手，对JS只是半熟悉。我开始使用React/Flask/Mongodb制作应用程序，但我在构建函数调用/变量集/渲染的一些最佳方法上遇到了麻烦。我已经做了足够的研究来让这个组件工作，但我觉得它很笨重，还有更好的方法。从本质上讲，我试图从DB中检索项目愿望列表的结果，并在屏幕上显示它们的属性。为了呈现我的返回列表，我一直在努力处理Promises的返回以及可变范围/位置。理想情况下，我会从DB返回我的列表，并在不修改的情况下将其存储起来，这样我就可以创建一个实际显示在UI上的列表，该列表可以由于过滤器而更改。如果我发错了，请告诉我。

Wishlist.js
import React from 'react';
import ReactDOM from "react-dom";
import Apis from './apis'
class Wishlist extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "",
quantity: 0,
baselink: "",
filter: "Default",
wishes: [],
wishesToShow: [],
loading: 'initial'
};
this.GetWishesList = this.GetWishesList.bind(this);
this.ShowWishes = this.ShowWishes.bind(this);
this.HandleFilterChange = this.HandleFilterChange.bind(this);
}
componentDidMount() {
this.setState({ loading: true });
this.GetWishesList();
}
ShowWishes() {
const uiWishes = this.state.wishesToShow
return (
< div >
{
uiWishes == null ? null :
uiWishes.map(({ name, quantity, cost, description, category, link }) => (
<div className='wish' key={cost}>
<div className="wishatt">Category: {category}</div>
<div className="wishatt">Item name: {name}</div>
<div className="wishatt">Description: {description}</div>
<div className="wishatt">Cost: {cost}</div>
<a className="wishatt" href={link}>Link: {link}</a>
<div className="wishatt">Quantity: {quantity}</div>
</div>
))
}
</div>
);
}
HandleFilterChange = (e) => {
const wishcheck = this.state.wishes
const value = e.target.value;
for (var i = wishcheck.length - 1; i >= 0; i--) {
if (wishcheck[i].category !== value) {
wishcheck.splice(i, 1);
}
if (wishcheck[i] != null) { console.log(wishcheck[i].category); }
}
this.setState({ filter: value, wishesToShow: wishcheck });
}
GetWishesList() {
Apis.GetWishes().then(function (response) { return response; }).then(data => {
this.setState({ wishes: data.data, wishesToShow: data.data, loading: 'false' });
})
}
render() {
if (this.state.loading === 'initial') {
return <h2 className="content">Initializing...</h2>;
}
if (this.state.loading === 'true') {
return <h2 className="content">Loading...</h2>;
}
const mywishes = this.ShowWishes();
return (
<div className="contentwrapper">
<div className="contentBanner"><h1 className="wishTitle">Wishes:</h1> <label>
<p className="bannerFilter">Category</p>
<select name="category" value={this.state.filter} onChange={this.HandleFilterChange}>
<option value="default">Default</option>
<option value="camping">Camping</option>
<option value="hendrix">Hendrix</option>
<option value="decor">Decor</option>
</select>
</label></div>
<div className="content"><div>{mywishes}</div>
</div>
</div>
);
};
}
export default Wishlist;

Apis.js
import axios from 'axios';

export default class Apis {
static InsertWish(body) {
console.log(body)
return axios.post(`http://localhost:5000/submitwish`, body)
.then(response => response)
.catch(error => console.log(error))
}
static GetWishes() {
return axios.get(`http://localhost:5000/getwishlists`)
.then(response => response)
.catch(error => console.log(error))
}
}

Answer 1

我也会清理Wishlist.js.中的JSX

return (
<div className="contentwrapper">
<div className="contentBanner">
<h1 className="wishTitle">Wishes:</h1> 
<label>
<p className="bannerFilter">Category</p>
<select 
name="category" 
value={this.state.filter} 
onChange={this.HandleFilterChange}>
<option value="default">Default</option>
<option value="camping">Camping</option>
<option value="hendrix">Hendrix</option>
<option value="decor">Decor</option>
</select>
</label>
</div>
<div className="content">
{mywishes}
</div>
</div>
);

Answer 2

您不需要导入useEffect或useState，因为您没有使用功能组件。

所以我会更改Wishlist.js-中的第1行

来自

从"React"导入React，｛useEffect，useState｝

至

从"React"导入React