這個 React 代碼可以通過哪些方式改進？

Question

我是 React 的新手，對 JS 只是半熟悉。 我開始使用 React/Flask/Mongodb 制作應用程序，但是我在一些構建函數調用/變量集/渲染的最佳方法上遇到了麻煩。 我已經完成了足夠多的研究以使該組件正常工作，但我覺得它很笨拙並且有更好的方法。 本質上，我試圖從我的數據庫中檢索項目願望清單的結果，並在屏幕上顯示它們的屬性。 為了呈現我返回的列表，我一直在努力處理 Promises 的返回以及可變范圍/位置。 理想情況下，我會從數據庫中返回我的列表並將其存儲而無需修改，這樣我就可以創建一個實際顯示在 UI 上的列表，該列表可以通過過濾器進行更改。 讓我知道我是否錯誤地發布了這個。

    Wishlist.js

    import React, { useEffect, useState } 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

您不知道導入 useEffect 或 useState，因為您沒有使用功能組件。

所以我會更改 Wishlist.js 中的第 1 行——

從

從'react'導入反應，{ useEffect，useState}；

至

從“反應”導入反應；

Answer 2

我還會清理 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>
);