Question

我正在尝试将我的类组件转换为功能组件，但是我的过滤器不再起作用。

主要错误是当我想转换 listProducts 时，因为我不知道如何为这种情况使用useState定义prevState

如何更新案件状态？

这是我的代码

类组件

class ListShopping extends Component{
    constructor(props) {
        super(props);
        this.state = {
            size: "",
            sort: "",
            cartItems: [],
            products: [],
            filteredProducts: []
        };
    }
    componentDidMount() {
        fetch("http://localhost:8000/products")
            .then(res => res.json())
            .catch(err =>
                fetch("db.json")
                    .then(res => res.json())
                    .then(data => data.products)
            )
            .then(data => {
                this.setState({ products: data });
                this.listProducts();
            });
    }

    listProducts = () => {
        this.setState(state => {
            if (state.sort !== "") {
                state.products.sort((a, b) =>
                    state.sort === "lowestprice"
                        ? a.price < b.price
                        ? 1
                        : -1
                        : a.price > b.price
                        ? 1
                        : -1
                );
            } else {
                state.products.sort((a, b) => (a.id > b.id ? 1 : -1));
            }

            if(state.size !== ""){
                return {
                    filteredProducts: state.products.filter(
                        a => a.availableSizes.indexOf(state.size.toUpperCase()) >= 0
                    )
                }
            }
            return { filteredProducts: state.products };
        });
    };
    handleSortChange = e => {
        this.setState({ sort: e.target.value });
        this.listProducts();
    };
    handleSizeChange = e => {
        this.setState({ size: e.target.value });
        this.listProducts();
    };
    render() {
        return (
            <div className="container">
                <h1>E-commerce Shopping Cart Application</h1>
                <hr />
                <div className="row">
                    <div className="col-md-9">
                        <Filter
                            count={this.state.filteredProducts.length}
                            handleSortChange={this.handleSortChange}
                            handleSizeChange={this.handleSizeChange}
                        />
                        <hr />
                        <Products
                            products={this.state.filteredProducts}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

功能组件

const ListShopping = () => {
    const [data, setData] = useState({
        products : [],
        filteredProducts : [],
        sort : '',
        size : ''
    })

    const {products, filteredProducts, sort, size} = data;
    const fetchApi = () => {
        axios.get(`http://localhost:8000/products`)
            .then(response => response.data)
            .then(data => {
                setData({...data, products: data});
            })
    }

    const listProducts = () => {

    };
    const handleSortChange = e => {
        setData({...e, sort: e.target.value})
        listProducts();
    };
    const handleSizeChange = e => {
        setData({...e, size: e.target.value})
        listProducts();
    };

    useEffect(()=> {
        fetchApi()
    }, [])
    return(
        <div className="container">
            <h1>E-commerce Shopping Cart Application</h1>
            <hr />
            <div className="row">
                <div className="col-md-9">
                    <Filter
                        count={filteredProducts.length}
                        handleSortChange={handleSortChange}
                        handleSizeChange={handleSizeChange}
                    />
                    <hr />
                    <Products
                        products={filteredProducts}
                    />
                </div>
            </div>
        </div>
    )
}

Answer 1

尝试

const listProducts = () => {
    setData(data => {
        if (data.sort !== '') {
            data.products.sort((a, b) =>
                data.sort === 'lowestprice'
                    ? a.price < b.price
                        ? 1
                        : -1
                    : a.price > b.price
                    ? 1
                    : -1,
            );
        } else {
            data.products.sort((a, b) => (a.id > b.id ? 1 : -1));
        }

        if (data.size !== '') {
            return {
                ...data,
                filteredProducts: data.products.filter(
                    a => a.availableSizes.indexOf(data.size.toUpperCase()) >= 0,
                ),
            };
        }

        return { ...data, filteredProducts: data.products };
    });
};

Answer 2

假设您处于这种状态

const [todos, setTodos] = useState([1,2,3,4,5,6,7]);

方法1：

现在，如果您想从此钩子获取prevState，请尝试这种方式

setTodos(oldTodo => {
                    oldTodo.push(1000);
                    setTodos(oldTodo)
                })

此oldTodo的工作方式与prevState相同。

方法2：

const listProducts = () => {
        let oldState = todos
        //Now do what you want to do with it. modify the oldTodo
        setTodos(oldTodo);
    }

我更喜欢第二种方法，因为它给了我更大的灵活性来更改修改状态，并且如果您不能在第一种方法中正确地管理状态，或者如果发现任何错误，那么它将返回未定义状态，因此我更喜欢将整个方法状态设置为临时变量，并在完成工作后进行设置

将类组件转换为功能组件时出错

2 个答案: